Using Keywords

From CSS Discuss

Jump to: navigation, search


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

Personal tools