Best practices for using font-weights

The CSS “font-weight” property is used to define the weight of a font, such as regular or bold. This article describes how to best use font families that have extended weights that may range from Extra Light all the way to Extra Black.

Here is how a regular and bold weight would be defined:

font-weight:normal
font-weight:bold

But for all other weights a numerical range from 100 to 900 is used. One of the challenges with web fonts is that most web browsers do not properly support font weights other than normal & bold. The following chart describes the possible mappings of weights to the numeric definitions:

  • 100    Extra Light or Ultra Light
  • 200    Light or Thin
  • 300    Book or Demi
  • 400    Normal or Regular
  • 500    Medium
  • 600    Semibold, Demibold
  • 700    Bold
  • 800    Black, Extra Bold or Heavy
  • 900    Extra Black, Fat, Poster or Ultra Black

How Webtype solves the issues with font-weight

We have solved the font-weight issue with our web font service by allowing you to customize the font-family name for each web font. For example you can create a font-family definition for Interstate-Light, and then use the ‘font-weight:normal’ definition (versus ‘font-weight:100’ which does not work properly across all browsers).

You will find the option to customize the font-family name after you have added fonts to a CSS resource in the Web Font Manager in your account.

Here is an example using the Interstate font family:

{ font-family: "Interstate Light"; font-weight: normal; }
{ font-family: "Interstate Medium"; font-weight: normal; }
{ font-family: "Interstate Regular"; font-weight: normal; }
{ font-family: "Interstate Semibold"; font-weight: bold; }
{ font-family: "Interstate Bold"; font-weight: bold; }
{ font-family: "Interstate Extrabold"; font-weight: bold; }
{ font-family: "Interstate Black"; font-weight: bold; }