The x-height is the distance between the base line and the mean line of a font.
The base line is the line on which most of the letters of a typeface "stand". The descenders extend below the base line.
The mean line is where the tops of lower-case letters end (excluding the ascenders). The ascenders extend above the mean line.
A typeface's x-height is usually (but not always) equal to the height of the character lowercase "x".
Here is an example of a CSS font size declaration that uses ex units:
p{font-size: 2.5ex}Font sizes in ex units can be floating point numbers, too. All the major browsers recognize up to two decimal places in ex font size declarations (example:
font-size:0.36ex).Each browser handles font size declarations in ex units differently - the resulting font size with a given font size declaration in ex varies between browsers. Here is how each of the major web browsers handles ex units.
Firefox 3
In Firefox 3, one ex is exactly equal to the vertical height of the lowercase letter "x". Therefore, when an element's font size is set to 1ex , the font size of the text will be equal to the height of the letter "x" in the inherited font.Example:
<div style="font-size:20px;font-family:Arial"><p style="font-size:2ex">the quick brown fox...</p>When the font size of Arial is 20px , the height of the letter "x" is 11px . Therefore, in the above example, one ex will be 11px . The font size of the text in the p element will be 2ex or 22px .
Note that in Firefox 3, 1ex will never be a non-integral number because the height of the letter x will always be a whole number when measured in pixels.
Font size can be specified in ex units using floating point numbers too. Firefox 3 correctly renders font size declarations in ex with two decimal places (example:
font-size: 3.25ex).Internet Explorer 6, Internet Explorer 7 and Opera 9.5
IE6, IE7 and Opera 9.5 take 1ex to be equal to 0.5em or half the inherited font size. These browsers completely ignore the actual height of the letter "x".Example:
<div style="font-size:20px;font-family:Impact"><p style="font-size:2ex">the quick brown fox...</p>The font size of the text in the p element will be 2opx (1ex = half the inherited font size, therefore 2ex = inherited font size). The same paragraph in Firefox 3 would have a font size of 26px.
In IE6, IE7, and Opera 9.5, 1ex can be either a whole number or a non-integral number, depending on whether the inherited font size is an even number or an odd number.
When using ex units, Opera 9.5's computed font size does not go below 9px.
Font size can be specified in ex units using floating point numbers too. Internet Explorer 6, Internet Explorer 7 and Opera 9.5 correctly render font size declarations in ex with two decimal places (example:
font-size: 3.25ex).Safari 3.1
Safari 3.1's calculation of 1ex is approximately equal to the height of the lowercase letter "x". It is not known exactly how Safari 3.1 determines the value of 1ex. Font size can be specified in ex units using floating point numbers too. Safari 3.1 correctly renders font size declarations in ex with two decimal places (example:font-size: 3.25ex).Important note for Firefox 3 and Safari 3.1: The size of 1ex is determined by the inherited font size and typeface, even if the current element has a different font family declaration.
Advantages and Disadvantages of using ex units in font size declarations
Using ex units to size fonts does not result in consistent sizes across browsers and should therefore be avoided.Sample data
The following table shows the number of pixels in 1ex in each of the major browsers for an inherited font size of 20px.| Font Family | Times New Roman | Arial | Verdana | Comic Sans MS | Courier New | Garamond | Georgia | Impact | Lucida Sans | Microsoft Sans Serif |
|---|---|---|---|---|---|---|---|---|---|---|
| Measured font height | 18 | 19 | 20 | 20 | 17 | 18 | 19 | 18 | 20 | 20 |
| height of the letter "x" | 9 | 11 | 11 | 10 | 9 | 8 | 10 | 13 | 11 | 11 |
| 1ex in px in Firefox3 | 9 | 11 | 11 | 10 | 9 | 8 | 10 | 13 | 11 | 11 |
| 1ex in px in IE6, IE7 and Opera9.5 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 |
| 1ex in px in Safari3.1 | 10 | 10 | 11 | 11 | 11 | 9 | 10 | 13 | 11 | 10 |
No comments:
Post a Comment