font-weight -- number keywords (100 - 900)

A typeface or font family can consist of more than one font. For example, the typeface Times New Roman contains the fonts Times New Roman, Times New Roman Bold, Times New Roman Bold Italic and Times New Roman Italic. In this typeface, the fonts Times New Roman and Times New Roman Bold are two different weights of the same typeface. The heavier the font weight, the darker the font.

CSS allows specifying 9 different font weights using the number keywords 100, 200, 300, 400, 500, 600, 700, 800 and 900. The number keyword 100 corresponds to the "lightest" weight. Each subsequent keyword corresponds to a "heavier" weight, if available. The CSS specification states that each number keyword corresponds to a weight greater than or equal to the preceding keyword's weight.

The number of font weights actually available for use depends on the typeface. Times New Roman on Windows XP has only two weights: regular and boldface. Lindau, a free font, has six weights: regular, light, bold, medium, extrabold and black.

The keyword 400 is equivalent to the font weight regular or normal. The keyword 700 is equivalent to the font weight bold. For a particular typeface, if the other keywords are not assigned, keywords 100 to 500 are equivalent to the font weight regular or normal and keywords 600 to 900 are equivalent to the font weight bold.

However, if the typeface has weights other than regular and bold that are unassigned to a number keyword, the browser uses the following system:

• The keyword 400 is assigned to regular or normal.
• The keyword 700 is assigned to bold.
• If 300 is not assigned to any font, it is assigned to the first available font lighter than regular. If a lighter weight font is not available, 300 is assigned to the same font as 400.
• The same process is repeated for 200 and 100. For example, if 200 is not assigned to any font, it is assigned to the first available font lighter than 300. If a lighter weight font is not available, 200 is assigned to the same font as 300.
• If 500 is unassigned, it will be assigned to the first available font heavier than 400. If no heavier font is available, 500 will be assigned to the same font as 400.
• If 600 is unassigned, it will be assigned to the first available font heavier than 500. If no heavier font is available, 600 will be assigned to the same font as 700 (boldface). The same process is followed for 700, 800 and 900.

Examples:

Lindau (OpenType)

font	assigned keywords
Lindau-Light	100, 200, 300
Lindau	400
Lindau-Medium	500
Lindau-Bold	600, 700
Lindau-ExtraBold	800
Lindau-Black	900

Times New Roman (TrueType)

font	assigned keywords
Times New Roman	100, 200, 300, 400, 500
Times New Roman Bold	600, 700, 800, 900

Browser Support

Firefox 3 fully supports the font-weight property when the font is an OpenType font. When the font is a True Type font, Firefox 3 renders the number keywords 100, 200, 300, 400 and 500 with the regular or normal font and the keywords 600, 700, 800 and 900 with the bold font. If the bold variant of the typeface is not available, Firefox 3 simulates the bold font by increasing the stroke width of the normal font.

Internet Explorer 6, Internet Explorer 7 and Opera 9.6 simulate 600-weight text even if an appropriate font is available in the typeface. This appears to be a bug. Apart from this, the rendering is the same as in Firefox 3.

Safari 3.2 renders text of weights 100 to 500 in regular fonts and text of font weight 600 to 900 in boldface fonts, regardless of whether the appropriate font weights are available in the typeface or not. Therefore, Safari 3.2 supports the font-weight property only partially.

When to use the font-weight property

The font-weight property should be used only with an OpenType typeface. Also, the number keyword 600 must be avoided due to a bug in Opera 9.6, Internet Explorer 6 and Internet Explorer 7. It should be noted that Safari 3.2 does not support font weights other than 400 and 700.