font-weight -- normal and bold

The two CSS declarations font-weight: bold and font-weight: normal make the text within an element boldface or normal respectively.
If a particular typeface does not have a boldface font (e.g. MS Sans Serif), all major web browsers simulate bold type by increasing the stroke width.
Applying the CSS declaration font-weight: bold to text that is already in boldface does not increase the weight of the text.

Font Weight Inheritance

The font-weight property is a heritable property — it is a property that is passed on from ancestor elements to descendant elements.
Example:<div style="font-family: Lindau;font-weight:200;">
<p>The quick brown fox jumps over the lazy dog</p>
</div>
In the above example, the font-weight of 200 is applied to the p element also.

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.

Comparison of font size rendering in word processors vs web browsers

Word processors and web browsers render font sizes in exactly the same size. For example, 12 point text in a word processor is exactly the same size as it is in a web browser.
However, browsers may have bugs which result in font sizes being rendered incorrectly. For example, in Firefox 3, when the font family is Times New Roman and the font-size is 26px (or its equivalents in other units), Firefox renders the text a little smaller than it should.

Zero Font Size

Each of the major browsers render text of zero units (or percentage) differently. Firefox 3 does not display the text. Internet Explorer 7 and Internet Explorer 6 render the text with a height of 1 pixel. Opera 9.6 does not display the text. Safari 3.1 renders 0em , 0ex and 0% text with a text size of 9px and renders text of 0px and zero absolute length units with a height of 1px.
Examples:
<p style="font-size: 0em;">jumps over the lazy dog</p>
<p style="font-size: 0ex;">jumps over the lazy dog</p>
<p style="font-size: 0%;">jumps over the lazy dog</p>
<p style="font-size: 0px;">jumps over the lazy dog</p>
<p style="font-size: 0pt;">jumps over the lazy dog</p>
<p style="font-size: 0mm;">jumps over the lazy dog</p>
<p style="font-size: 0cm;">jumps over the lazy dog</p>
<p style="font-size: 0in;">jumps over the lazy dog</p>
<p style="font-size: 0pc;">jumps over the lazy dog</p>

Font Size: Leading and Trailing Zeroes

When specifying a font size, the value can have leading and trailing zeroes or they can be omitted completely. This does not affect the way the text is rendered.

Leading Zeroes

Zeros that appear at the beginning of a number are called leading zeroes. Example: font-size:0.5in - the first digit is a leading zero. In all major browsers, leading zeroes are optional. Therefore font-size:.5in is a valid way of specifying font size. There can also be more than one leading zero.

Trailing zero

Zeroes that appear after a decimal point and at the end of the number are called trailing zeroes. Example: font-size:2.50em - the last digit is a trailing zero. In all major browsers, trailing zeroes are optional. Therefore, all the following declarations result in the same font size:
font-size: 2.5em
font-size:2.50em
font-size: 2.500em