Some font families usually come with different faces that have varying amounts of thickness or boldness; this thickness is referred to as the font weight in CSS.
font-weight property is used to select the font thickness of the font (their degree of blackness or thickness).
The weight of the font is usually described by a keyword or a number. The numbers are an ordered sequence starting at 100 through 900, where each number indicates a weight that is at least as dark as its predecessor. Keywords are mapped to appropriate numbers, for example, the keyword
normal is synonymous with ‘400’, and
bold is synonymous with ‘700’. The keywords are:
lighter keywords select font weights that are relative to the weight inherited from the element’s parent. The computed weight is calculated based on the inherited
font-weight value using the table below.
Quite often there are font families that don’t come with all the possible font weights, and come with only a few face weights available. When a weight is specified for which no face exists, a face with a nearby weight is used. In general, bold weights map to faces with heavier weights and light weights map to faces with lighter weights.
This means that sometimes, using the keywords
bolder, may not give the expected result if the font family used does not have a wide range of font weights. The
bolder version of a bold face can, a lot of times, look exactly the same as the
When a certain font family is used that does not have a
normal or a
bold face, the browser will synthesize these faces. For the purposes of style matching, these faces must be treated as if they exist within the family. Web developers can, however, disable this feature using the
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
- Initial: normal
- Applies To: all elements
- Animatable: yes
- 100, 200, 300, 400, 500, 600, 700, 800, 900
The Mozilla docs describe these numbers best:
“Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.”
There are often value names that are commonly used and that correspond to each of the 9 weights respectively: ‘Thin’, ‘Extra Light (Ultra Thin)’, ‘Light’, ‘Normal’, ‘Medium’, ‘Semi Bold (Demi Bold)’, ‘Bold’, ‘Extra Bold (Ultra Bold)’, and ‘Black (Heavy)’.
- Same as ‘400’.
- Same as ‘700’.
- Specifies a font that is bolder than the element’s parent’s font weight (among the list of available weights).
- Specifies a font that is lighter than the element’s parent’s font weight (among the list of available weights).
The following are all valid
font-weight: 300; font-weight: 900; font-weight: normal font-weight: bold; font-weight: bolder; font-weight: lighter;
Change the font weights and try different font families in the following demo to see how the font weights are rendered.View this demo on the Codrops Playground
font-weight property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.