This article needs a technical review. How you can help.
Summary
The font-weight
CSS property specifies the weight or boldness of the font. Some fonts are only available in normal
and bold
.
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | the keyword or the numerical value as specified, with bolder and lighter transformed to the real value |
Animation type | a font weight |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
font-weight: normal; font-weight: bold; /* Relative to the parent */ font-weight: lighter; font-weight: bolder; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: unset;
Values
normal
- Normal font weight. Same as
400
. bold
- Bold font weight. Same as
700
. lighter
- One font weight lighter than the parent element (among the available weights of the font).
bolder
- One font weight darker than the parent element (among the available weights of the font).
100
,200
,300
,400
,500
,600
,700
,800
,900
- Numeric font weights for fonts that provide more than just normal and bold.
Fallback
If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:
- If a weight greater than
500
is given, the closest available darker weight is used (or, if there is none, the closest available lighter weight). - If a weight less than
400
is given, the closest available lighter weight is used (or, if there is none, the closest available darker weight). - If a weight of exactly
400
is given, then500
is used. If500
is not available, then the heuristic for font weights less than 400 is used. - If a weight of exactly
500
is given, then400
is used. If400
is not available, then the heuristic for font weights less than 400 is used.
This means that for fonts that provide only normal
and bold
, 100
-500
are normal, and 600
-900
are bold.
Meaning of relative weights
When lighter
or bolder
is given, the following chart is used to calculate the absolute weight of the element:
Inherited value | bolder |
lighter |
---|---|---|
100 | 400 | 100 |
200 | 400 | 100 |
300 | 400 | 100 |
400 | 700 | 100 |
500 | 700 | 100 |
600 | 900 | 400 |
700 | 900 | 400 |
800 | 900 | 700 |
900 | 900 | 700 |
Common weight name mapping
The 100 to 900 values roughly correspond to the following common weight names:
100
- Thin (Hairline)
200
- Extra Light (Ultra Light)
300
- Light
400
- Normal
500
- Medium
600
- Semi Bold (Demi Bold)
700
- Bold
800
- Extra Bold (Ultra Bold)
900
- Black (Heavy)
Interpolation
A font-weight
value is interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.
Formal syntax
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Examples
HTML
<p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?' </p> <div>I'm heavy<br/> <span>I'm lighter</span> </div>
CSS
/* Set paragraph text to be bold. */ p { font-weight: bold; } /* Set div text to two steps darker than normal but less than a standard bold. */ div { font-weight: 600; } /* Sets text enclosed within span tag to be one step lighter than the parent. */ span { font-weight: lighter; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font-weight' in that specification. |
Candidate Recommendation | No change |
CSS Transitions The definition of 'font-weight' in that specification. |
Working Draft | Defines font-weight as animatable. |
CSS Level 2 (Revision 1) The definition of 'font-weight' in that specification. |
Recommendation | No change |
CSS Level 1 The definition of 'font-weight' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 2.0 | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.3 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.0) | 6.0 | 6.0 | 3.1 |