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.