Most of the fonts that you use, come with different font weights. The ones you might have come across frequently are bold and normal (or regular). In this article, you will learn about different font weights available in CSS and what they imply visually.
Font Weight Declaration in CSS
In CSS, the following weight values can be declared for a font (given, of course, that the font family actually has those weight variants / faces otherwise the font weight is substituted):
| CSS Value | Description |
|---|---|
100 |
Thin (or Hairline) |
200 |
Extra-light (or Ultra Light) |
300 |
Light |
400 |
Normal (or Regular) |
500 |
Medium |
600 |
Semi Bold (or Demi Bold) |
700 |
Bold |
800 |
Extra Bold (or Ultra Bold) |
900 |
Black (or Heavy) |
normal |
Normal (equivalent of numeric font-weight value 400 in CSS) |
bold |
Bold (equivalent of numeric font-weight value 700 in CSS) |
bolder |
One relative font weight darker than the parent element |
lighter |
One relative font weight lighter than the parent element |
You may see different descriptions for these font weights in different places, that is because there is no accepted, universal meaning to these weight names / values. The general idea is that you understand that their primary role is to distinguish faces of differing darkness within a single font family.
Please note that when determining relative font weights (i.e. lighter and bolder), only four font weights are considered (i.e. 100, 400, 700, and 900) for relative weight calculation. All other values are ignored.
If a font-weight is missing in a font family, then the browser may try to find a substitute or create a faux bold effect.
Q&A
A few things answered that you may be wondering:
Why Are There Only 9 Numeric Values for the font-weight Property?
The scale of 9 weights has been selected to cover all traditional typographic weights. However, in CSS Fonts Level 4 specification any number between 1 and 1000 is allowed. This provides greater flexibility for variable fonts for example, which can have a more fine-grained control over the font weights.
Why Can't We Use String Values to Define CSS Font Weight?
The numeric values are neutral and can be used independently of the naming scheme of a font.
Why Do the CSS Font Weight Numeric Values Start From 100 and Not From 1?
The font scale of 100 through 900 was introduced by TrueType font format, where 400 is regular (roman or plain). The same scale is also used in CSS and OpenType font format. In CSS Fonts Level 4 specification, however, any number between 1 and 1000 is allowed.
This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.