Working with Typefaces and Fonts

The ability to specify typefaces outside of markup is one of the greatest strengths of CSS. On account of this, presentation of typography on the web medium is now a far cry from where it was in its infancy, when all pages were set in a single typeface chosen by the visitor.

The Challenge of Limited Choices

To make another long story extremely short, there are all of 16 typefaces available to Windows XP that are appropriate for web use—and of those, 3 are functionally useless, each for its own reasons. OS X offers a broader range of choices, but given its market share, the best thing a designer can do is choose one of the XP typefaces as a fallback, in addition to choosing an OS X font, as shown in Table 12-3.

The ubiquity of Microsoft Office (and its bundled fonts) is a bright spot in this otherwise bleak typography landscape, but most of those fonts are intended for print use, not web use.

Table 12-3. Latin typefaces [2] commonly available to web users, according to operating system. Broadly available fonts are highlighted; fallbacks [3] are spelled out.

Typeface

Operating system

Windows XP

Windows Vista & 7

Mac OS X 10.3

Mac OS X 10.5

American Typewriter

Courier New

Courier New

✓

✓

Andale Mono [a]

✓

✓

Monaco

✓

Apple Gothic

Microsoft Sans Serif

Microsoft Sans Serif

✓

✓

Arial [a]

✓

✓

✓

✓

Arial Black [b]

✓

✓

✓

✓

Arial Narrow [b]

✓

✓

✓

✓

Arial Rounded

Arial

Arial

✓

✓

Arial Unicode

Arial Unicode MS

Arial Unicode MS

Arial

×

Arial Unicode MS

✓

✓

Arial ...

Get HTML & CSS: The Good Parts now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.