Using Keywords
From CSS Discuss
Contents |
CSS font-size keywords:
xx-small, x-small, small, medium, large, x-large and xx-large
Part of: Using Font Size
In modern browsers rendering in Standards Mode, body {font-size: medium;} produces text equal in size to the browser default, whatever size that may be, and equal in size to that from body {font-size: 100%;} and body {font-size: 1em;}. The keywords differ from em and % in that each keyword is always based upon the browser default, while em and % are based upon the size of the parent element, which is subject to cascade of ancestor sizing.
Internet Explorer 6 in Quirks Mode and earlier Internet Explorer versions treat 'small' rather than 'medium' as the browser default, and each of the other keyword sizes correspondingly larger. As a consequence, authors using keywords should ensure that their documents are rendered in Standards Mode, and understand that early Internet Explorer versions will not size them the same as current browser versions.
Due to their immunity to cascade, these keywords are referred to by the CSS specs as absolute-size, even though they are always relative to the browser default.
The CSS keywords produce the same size text intervals as does the application of <font size=x> HTML markup. Though each group produces seven sizes, the correlation between the HTML and CSS versions is not what one might expect. Here are typical matchups used by the most recent browser versions:
| HTML | Keyword | Example Sizes |
|---|---|---|
| Not Applicable | xx-small | 9px |
| size=1, size=-2 | x-small | 10px |
| size=2, size=-1, small | small | 13px |
| size=3 | medium | 16px |
| size=4, size=+1, big | large | 19px |
| size=5, size=+2 | x-large | 24px |
| size=6, size=+3 | xx-large | 32px |
| size=7, size=+4 | Not Applicable | 48px |
Related pages:
More info
Size Matters, A List Apart 2001 Keyword Sizing for Beginners, Forum Discussion 2005
