CSS Property: font-weight Examples

CSS font-weight Property

The CSS property "font-weight" sets how thick or thin characters in text should be displayed. This provides variant thicker types.

font-weight: 400 is supposed to be equal to normal, while 700 is equal to bold. Finally, there are the relative values bolder and lighter that make a bit of text one step bolder or lighter than the default weight (which in turn depends on the absolute font-weight value you defined).

CSS Property Font-Weight Syntax

font-weight:  normal|bold|bolder|lighter|number|initial|inherit;

Supported Values on property font-weight

Usually we can use any one of the following value for the property.

normal: Standard weight. Equivalent of 400
bold: Bold weight. Equivalent of 700
bolder: Bolder than the inherited font weight
lighter: Lighter than the inherited font weight
100    Lightest
200    Bolder than 100, lighter than 300
300    Bolder than 200, lighter than 400
400    Bolder than 300, lighter than 500. Equivalent of normal.
500    Bolder than 400, lighter than 600
600    Bolder than 500, lighter than 700
700    Bolder than 600, lighter than 800. Equivalent of bold.
800    Bolder than 700, lighter than 900
900    Boldest

Global Values

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

CSS Property Font Weight Supported Browsers

This supports in all major versions of all browsers. Below described the starting version of each browser to new version.

Chrome: 2.0
IE: 4.0
Mozilla: 1.0
Safari: 1.3
Opera: 3.5

CSS Property Font Weight Example

.css-text { font-weight: bold; }

/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

Reference