The font-size-adjust property

The font-size-adjust property is used to specify font size by indirectly specifying the x-height of text. This property accepts three values: a number, none and inherit . This property was dropped from the CSS2.1 specification.
Example: <p style="font-size: 40px;font-size-adjust: 0.55">the quick brown fox jumps over the lazy dog</p>
The x-height of the text will be font size * font-size-adjust . Therefore, in the above example, the x-height will be 40px * 0.55 = 22px . However, depending on the font family, there might be a difference of one pixel.
This property can be used to ensure that when fallback font families are used, their appearance can be similar to the first choice font family.

---

Browser Support

Internet Explorer 6, Internet Explorer 7, Opera 9.6 and Safari 3.2 ignore this property. Firefox 3 fully supports this property.

The font-stretch property

The font-stretch property is used to stretch or contract the width of fonts. This property has 12 possible values: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded and inherit. This is a font property that was not included in the CSS 2.1 specification.

Example: <p style="font-stretch: ultra-condensed">the quick brown fox jumps over the lazy dog</p>

---

Browser Support

This property is not supported by Firefox 3, Internet Explorer 6, Internet Explorer 7, Opera 9.6 and Safari 3.2 . These browsers ignore this property.

The font-variant property

The font-variant property has 3 possible values: small-caps, normal and inherit .
The keyword small-caps converts the lower case letters of the text it is applied to to small capital letters. Small capital letters are letters that are of a smaller height than regular capital letters.
Some typefaces have a specific small-caps font. However, none of the typefaces that are supplied with Windows XP have a specific small-caps face. A web browser, however, can simulate small-caps type by down scaling regular capital letters.
Example: <p style="font-variant: small-caps">The Quick Brown Fox Jumps Over The Lazy Dog</p>

---

Browser Support

Firefox 3, Opera 9.6, Internet Explorer 6, Internet Explorer 7 and Safari 3.2 simulate small-caps type when used with the typefaces available in Windows XP.

The font-style property

The font-style property has four possible values: italic, oblique, normal, and inherit.
The first two values set the font to italic type or oblique type. Oblique type is a form of type that slants slightly to the right. Italic refers to cursive typefaces based on a stylized form of calligraphic handwriting. Italic typefaces usually slightly slant to the right — wikipedia.
Example: <p style="font-style:italic">the five boxing wizards jump quickly</p>
Usually, serif typefaces contain italic fonts and sans-serif typefaces contain slanted or oblique fonts. However, it is common for slanted sans-serif fonts to be named italic. It is extremely rare for a typeface to contain both an oblique typeface and an italic typeface. When specifying oblique text, the browser will use italic fonts if an oblique font is not available and vice versa. Therefore, with most typefaces, the css declaration of italic and oblique have the same effect — with serif typefaces you get italics and sans-serif typefaces you get oblique.

---

Browser Support

Firefox 3, Opera 9.6, Internet Explorer 6, Internet Explorer 7 and Safari 3.2 all handle font-style in the same way. The values italic and oblique have the same effect - the browser uses italic fonts with serif typefaces and oblique fonts with serif typefaces. If an italic or oblique font is not available in the typeface, the browser simulates oblique type by slanting normal type. The property font-style is inherited.

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 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

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.

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.