Wednesday, January 14, 2009

font-weight -- bolder and lighter

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 weightfont-weight:bolder
100400
200500
300simulated 600
400600 (real)
500800
600900
700900
800900
900900
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
Safari 3.2 only renders the weights normal (400) and bold (700). Therefore, font-weight:bolder always results in boldface text.

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
Safari 3.2 only renders the weights normal (400) and bold (700). Therefore, font-weight:lighter always results in normal(400-weight) text.
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.

1 comment:

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards