Font-weight best practices with web fonts
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 FontsLive 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 EndurancePro-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 Mayberry Pro font family:
{ font-family: "Mayberry Pro Light"; font-weight: normal; }
{ font-family: "Mayberry Pro Medium"; font-weight: normal; }
{ font-family: "Mayberry Pro"; font-weight: normal; }
{ font-family: "Mayberry Pro Semibold"; font-weight: bold; }
{ font-family: "Mayberry Pro Bold"; font-weight: bold; }
{ font-family: "Mayberry Pro Extrabold"; font-weight: bold; }
{ font-family: "Mayberry Pro Black"; font-weight: bold; }
> Articles on Web Typography