CSS font-weight cheat sheet
Summary
This CSS font-weight cheat sheet helps you understand numeric values (100-950) and keyword values like bold and lighter for styling text weight using Cascading Style Sheets (CSS). You will also learn about variable fonts and how Browsers simulate missing weights if necessary.
Introduction #
The font-weight property in Cascading Style Sheets (CSS) controls the boldness or thickness of text. It allows you to specify font weights using numeric values or keyword values, depending on the font-family and browser support.
This cheat sheet outlines all accepted font-weight values, their effects, and best usage practices.
Numeric values of font-weight #
The numeric scale of font-weight officially ranges from 100 to 900 in increments of 100. However, some fonts support an unofficial value: 950.
| Name (Primary) | Alternate Names | Numerical Value |
|---|---|---|
| THIN | Hairline | 100 |
| EXTRA LIGHT | Ultra Light | 200 |
| LIGHT | – | 300 |
| REGULAR | Normal, Book, Plain | 400 |
| MEDIUM | – | 500 |
| SEMI BOLD | Demi Bold | 600 |
| BOLD | – | 700 |
| EXTRA BOLD | Ultra Bold | 800 |
| BLACK | Heavy, Extra Bold | 900 |
| EXTRA BLACK | Ultra Black, Super Black | 950 (non-standard) |
Not all fonts support every numeric value. When a font-family does not support the specified weight, the browser will attempt to simulate it or use the closest available weight, e.g. if 800 is missing, browsers use 700 or 900.
The value 950 is not part of the official CSS specification, but it is supported by some variable fonts such as those in Google Fonts. Use it with caution and test cross-browser behavior.
Keyword values of font-weight #
CSS defines several keyword values for font-weight. These are aliases for specific numeric values, although their interpretation may vary depending on the font.
font-weight: normal; /* Same as 400 */
font-weight: bold; /* Same as 700 */
font-weight: lighter; /* Relative to the parent element */
font-weight: bolder; /* Relative to the parent element */
normal: Standard font weight, commonly rendered as 400.bold: Bold font weight, commonly rendered as 700.lighter: Makes the text lighter than the parent element’s weight.bolder: Makes the text bolder than the parent element’s weight.
Relative weights: bolder and lighter #
The values bolder and lighter are relative, not absolute. They depend on the computed weight of the parent element.
div {
font-weight: 400;
}
div span {
font-weight: bolder; /* Likely 700 */
}
If the parent is set to bold (700), a lighter child will typically render at 400. The actual output depends on the browser and font-family.
Font support and fallback behavior #
Not all fonts support all weights. For example, system fonts like Arial or Helvetica may only include normal and bold. Web fonts such as Google Fonts often include multiple weight variants.
If the font-family does not support the requested weight, the browser will approximate the result, which may result in synthetic bolding or no change at all.
Variable fonts #
Variable fonts allow smooth transitions between weights.
You can assign any number between 1 and 999, not just multiples of 100.
font-variation-settings: 'wght' 532;
Use font-weight in combination with variable fonts that support them to produce finer typographic control.
FAQ's #
Most common questions and brief, easy-to-understand answers on the topic:
What is the default value of the font-weight property?
The default value of font-weight is normal, which corresponds to a numeric value of 400.
Can I use numeric values and keyword values interchangeably in font-weight?
Yes, numeric values like 400 and keywords like normal can be used interchangeably where supported.
Does font-weight work with all fonts?
No, some fonts do not include multiple weights. The effect of font-weight depends on the font-family used.
Is bolder a specific numeric value?
No, bolder is a relative keyword that increases the weight compared to the parent element's weight.
How do I check which weights a font supports?
You can check available weights in the font documentation or use browser developer tools to inspect rendered font-weight.
Further readings #
Sources and recommended, further resources on the topic:
Author
Jonas Jared Jacek (J15k)
Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/License
CSS font-weight cheat sheet by Jonas Jared Jacek is licensed under CC BY-SA 4.0.
This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/css-font-weight-cheat-sheet">CSS font-weight cheat sheet</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>For more information see the Ditig legal page.
