Wednesday, January 14, 2009

font-weight: bolder

This CSS declaration is supposed to render the text it is applied to in a font darker than the inherited font. However, this declaration gives different results in each of the major browsers. Example: <p style="font-weight: 300">The quick brown fox jumps over the <span style="font-weight:bolder">lazy dog</span></p>

Firefox 3

Firefox 3 darkens the text by using the next heavier font available in the typeface. For example, if a typeface contains a font of weight 100 and a font of weight 400, the CSS declaration font-weight: bolder when applied to text of weight 100, will result in the text having a font weight of 400.

Opera 9.6

The CSS declaration font-weight:bolder in Opera 9.6 increases the font weight by one step (i.e. text of inherited weight 100 is made 200; text of inherited weight 200 is made 400, and so on). Since a typeface does not always have all the nine possible font weights, using font-weight: bolder in Opera 9.6 does not always result in darker text.

Internet Explorer 6 and Internet Explorer 7

Internet Explorer 6 and 7 darken font-weight:bolder text by using the next heavier font available in the typeface. However, Internet Explorer 6 and 7 also make each font weight's bolder text darker than the previous font weight's bolder text.
For example, the OpenType typeface Lindau has six weights:

300

400

500

600

800

900

The following table shows how IE6 and IE7 handle font-weight:bolder with the Lindau typeface.

inherited weight

font-weight:bolder

100

400

200

500

300

simulated 600

400

600 (real)

500

800

600

900

700

900

800

900

900

900

The "simulated 600" refers to the weight that Internet Explorer 6 and 7 renders text of font-weight:600 — instead of using the appropriate font from the typeface, these browsers attempt to simulate it resulting in a kind of pseudo-600 text.

Safari 3.2

font-weight:lighter

This CSS declaration is supposed to render the text it is applied to in a font lighter than the inherited font. However, this declaration gives different results in each of the major browsers.
Example: <p style="font-weight: 600">The quick brown fox jumps over the <span style="font-weight:lighter">lazy dog</span></p>

Firefox 3

Firefox 3 lightens the text by using the next lighter font available in the typeface. For example, if a typeface contains a font of weight 600 and a font of weight 400, the CSS declaration font-weight: lighter when applied to text of weight 600, will result in the text having a font weight of 400.

Opera 9.6

Opera 9.6, like Firefox 3, lightens the text by using the next lighter font available in the typeface. For example, if a typeface contains a font of weight 600 and a font of weight 400, the CSS declaration font-weight: lighter when applied to text of weight 600, will result in the text having a font weight of 400.

Internet Explorer 6 and Internet Explorer 7

When the CSS declaration font-weight:lighter is applied to text whose weight is 100, 200, 300, 400, 500 and 600, Internet Explorer 6 and 7 use fonts that are lighter than normal (400-weight) font. For example, in a typeface that contains all the 9 weights, font-weight:lighter will turn 600-weight text to 300, 500-weight text to 300, 400-weight text to 300, 300-weight text to 200, 200-weight text to 100. 100-weight text will remain the same.
When the CSS declaration font-weight:lighter is applied to text whose weight is 700, 800 and 900, Internet Explorer 6 and 7 use fonts that are lighter than boldface. For example, in a typeface that contains all the 9 weights, font-weight:lighter will turn 900 to simulated 600, 800 to 500 and 700 to 400.

Safari 3.2

Conclusion

Since each browser handles font-weight:bolder and font-weight:lighter differently, and because the default typefaces available in Windows don't have multiple weights, this CSS declaration must be avoided.