Monday, October 13, 2008

Font Size - Percentage Values

The value of the CSS property font-size can be specified as a percentage. Negative percentages are not allowed.
Example: p {font-size: 120%;}
Specifying font size in percentages sizes the text of an element relative to the inherited font size.
Font size declarations can be floating point percentages too (example: font-size:62.5%). However, Internet Explorer 6 and Internet Explorer 7 ignore the fractional part in percentage font size declarations. This could cause problems - using percentages can sometimes give unexpected results in Internet Explorer 6 and Internet Explorer 7. Careful calculation of inherited and computed sizes can prevent this.
Inherited font sizes and computed values from percentages can be floating point numbers. Therefore, browsers round off the value when rendering the text.
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.
Note: For a given inherited font size, the final font size obtained when using percentages 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.

No comments: