UsableTypeTypography for the World Wide Web

style guide

Font Weights

Font weight refers to the ‘boldness’ or darkness of a font. Generally, the heavier a font weight is, the darker or more bold the text becomes. This is not a new concept, as we have been setting fonts to ‘bold’ for years, by using the deprecated <b> element for example. What might not be familiar is the term ‘font weight’, but it represents exactly the same principal.

In theory the font-weight property in CSS is extremely powerful. Unfortunately it can rarely be used to its fullest potential, for a number of reasons. The CSS specification says that font weight can be defined, amongst other methods, by the keywords 100 through 900. Of course, most font families do not have nine different font weights to utilise. Some may have five or six, others only two; so there is no inherent weight for each of these keyword numbers. Because of this, browsers need a way of defining what keyword means what.

Defining Font Weights

The CSS specification says of the keywords, “each number indicates a weight that is at least as dark as its predecessor”. So, the font-weight keyword 900 can never be lighter than 800, which in turn cannot be lighter than 700, and so on. This in itself does not tell us much about using the font-weight property. We need to know how these keywords relate to different font weights in our font family. What if our font family only has four font weights at its disposal?

As it happens, that question is at the crux of the solution. The way the font weights in the family relate to the keywords depends on the number of font weights in the family. The simplest example, of course, is a font family that has nine different font weights to play with, such as OpenType. Each one is mapped to an individual keyword, and we have the utopian amount of control that CSS theoretically allows. However, the solution is a little different when it comes to a font family which has less than nine weights… bear with us though.

Each different font face within a family has to have a unique name. Unfortunately there is no standard for the naming of font faces, and in terms of font weights, we are left with a fairly haphazard group of names, such as Heavy, Book, Roman, Bold, etc. CSS does its best to try and guess what the font face names will most likely be, and then uses the following scheme to decide how each one should map to the keywords.

  • Any font variant named Normal, Regular, Roman, or Book is mapped to the keyword 400. Following this, any variant with the name Medium is mapped to 500.If none of the previous four variant names appear, then Medium is mapped to 400.
  • Any font variant named Bold will be mapped to 700.
  • If keyword 500 is still unmapped, it becomes equivalent to the font weight of 400.
  • If 300 has yet to be mapped, it should be given the next variant which is lighter than that of 400. If there is no lighter variant then it takes the same face as 400, as will keywords 200 and 100.
  • If 600 is still unmapped, it should be given the next variant which is darker than that of 400. If none is available then it will be mapped to the same variant as 500.
  • If 700 is still unmapped, it will be given the next variant which is darker than that of 600. If none is available then it will be mapped to the same variant as 500, as will 800, and 900.

Relative Font Weights

There are two ways of specifying font weights relative to the parent element in the document. We do this by using the values bolder, and lighter. A common misconception is that bolder will by default produce a darker font than the value of bold. This is not necessarily the case, of course, as the value bolder will specify a weight in relation to its parent element. If the parent element is set at keyword 200, then the value bolder will take the new element only up to 500. For example:

p {font-weight:100;}

strong {font-weight:bold;}

em {font-weight:bolder;}

<p>This sentence has <strong>some bold text</strong> within it, as well as some text which is <em>styled as bolder</em></p>

This sentence has some bold text within it, as well as some text which is styled as bolder.

The chances are, the font you are currently viewing this page with, has only two different weights available to it. Therefore the styling of 100 takes the lighter one and the bold value takes the heavier one. The emphasized text is given a bolder value than its parent element, but this makes no difference to the styling of the text as there is no font variant between keywords 100 and 700.

The method works exactly the same when lightening fonts, only it moves down the scale of keywords.

font-weight
Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Initial Value: normal
Applies to: all elements
Inherited: yes

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close