Most of the fonts that you use, come with different font weights. The ones you might have come across frequently are
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):
||Thin (or Hairline)|
||Extra-light (or Ultra Light)|
||Normal (or Regular)|
||Semi Bold (or Demi Bold)|
||Extra Bold (or Ultra Bold)|
||Black (or Heavy)|
||Normal (equivalent of numeric
||Bold (equivalent of numeric
||One relative font weight darker than the parent element|
||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.
bolder), only four font weights are considered (i.e.
900) for relative weight calculation. All other values are ignored.
font-weight is missing in a font family, then the browser may try to find a substitute or create a faux bold effect.
A few things answered that you may be wondering:
Why Are There Only 9 Numeric Values for the
The scale of 9 weights has been selected to cover all traditional typographic weights. However, in CSS Fonts Level 4 specification any number between
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
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
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.