Monday, October 13, 2008

Font Size - Relative Length Units - em

One of the relative length units that can be used with the font-size property is em. In CSS, one em is equivalent to 100%. Therefore, 0.01em is 1%, and so on. Like percentage values, the em unit specifies the font size relative to the inherited font size.
Example: div {font-size: 1.5em}
Font sizes in em's specify the text size of an element relative to the inherited font size.
Font size declarations in em's can be floating point numbers (example: 0.625em). When sizing text using em's, there are times when three decimal places are required to avoid unexpected results. However, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 ignore the third decimal place. These browsers only recognize two decimal places in em font size declarations. Inherited font sizes and calculated font size values from em declarations can be non-integral. Therefore, browsers round off the value.
All browsers round off this way: After the decimal point, any number greater than 4 (that is, numbers 5 to 9) is rounded off to 1px (example: 19.5px is rendered as 20px text). However, it is the floating point size that is inherited by descendant elements.
One must avoid using font size declarations that result in computed values containing more than one decimal place because this brings out the bugs in browsers, giving unpredictable results.
Example: Ancestor font size: 35px, Parent font size: 0.91em (computed value = 31.85px), Child font size: 0.8em (computed value = 25.48px, rounded off actual value = 25px). Browsers round off this value to 25px when rendering the text. However, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 render the font in 26px .
One way of avoiding computed sizes with many decimal places is by specifying the em values with up to two decimal places in order to obtain a calculated value that is nearly a whole number. In the above example, the child font size can be specified as 0.79em, which gives a computed font size of 25.16px . All browsers round this off correctly.
Note: For a given inherited font size, the final font size obtained when using em values is dependent on the inherited font size in pixels. Whether a given inherited font size in pixels is obtained by using inches, keywords or any other units is unimportant.

1 comment:

Anonymous said...

Very helpful info