CSS Typography

Journalists' Toolkit > Design > CSS Typography

The typefaces shown in these illustrations were created in Photoshop on a Mac.
Some of them would look different if created on a Windows computer.
All are shown at exactly the same size: 48 px.

Serif font-families

font-family: "Book Antiqua", Georgia, serif;

Image: Serif font familiies

Note: Windows usually does not have Palatino; it has "Palatino Linotype" -- not the same thing in the Web browser.

Sans-serif font-families

font-family: "Helvetica Neue", Arial, sans-serif;

Image: sans-serif

Monospace font-families

font-family: Monaco, "Lucida Sans Typewriter", monospace;

Image: monospace

Note: Monospace typefaces may have serifs or not.
They are distinguished by the fact that each letter occupies exactly the same amount of horizontal space (width).
NOT ALL "typewriter"-style faces are monospace.

Please note that Courier and "Courier New" both look very different on Windows computers.
In fact, they are the opposite of what you see here.

Journalists' Toolkit > Home