Browser Font Samples

The following are the fonts that can be found on standard OS installs (excluding bitmap and symbol fonts). The names are colour-coded for Windows XP, Mac OS X and Vista.

The Vista set, officially named the "ClearType Collection" also ships with Microsoft Office 2007 and can be freely obtained as part of the PowerPoint 2007 viewer (try to find it here). However, this set cannot be assumed to be available for client-side rendering, since it is not formally available for Mac or other OSes. The fonts are included here for comparison purposes only. This demonstrates one obvious characteristic: their smaller size at the same specified em. This makes it difficult to include them alongside "older" fonts. Another problem: Firefox on a Mac renders at least some of these very badly.

Of course you need all the following fonts installed for this to look correct!

sans-serif
Tahoma Geneva	My faxed joke won a pager in the cable TV quiz show.
Arial Arial Helvetica	My faxed joke won a pager in the cable TV quiz show.
Trebuchet MS Helvetica	My faxed joke won a pager in the cable TV quiz show.
Lucida Sans Unicode Lucida Grande	My faxed joke won a pager in the cable TV quiz show.
Verdana Verdana Geneva	My faxed joke won a pager in the cable TV quiz show.
Impact Impact Charcoal	My faxed joke won a pager in the cable TV quiz show.
Arial Black Arial Black Gadget	My faxed joke won a pager in the cable TV quiz show.
Calibri	My faxed joke won a pager in the cable TV quiz show.
Candara	My faxed joke won a pager in the cable TV quiz show.
Corbel	My faxed joke won a pager in the cable TV quiz show.
serif
Georgia Georgia	My faxed joke won a pager in the cable TV quiz show.
Times New Roman Times	My faxed joke won a pager in the cable TV quiz show.
Palatino Linotype Book Antiqua Palatino	My faxed joke won a pager in the cable TV quiz show.
Cambria	My faxed joke won a pager in the cable TV quiz show.
Constantias	My faxed joke won a pager in the cable TV quiz show.
monospace
Courier New Courier New Courier	My faxed joke won a pager in the cable TV quiz show.
Lucida Console Monaco	My faxed joke won a pager in the cable TV quiz show.
Consolas	My faxed joke won a pager in the cable TV quiz show.
cursive
Comic Sans MS Comic Sans MS	My faxed joke won a pager in the cable TV quiz show.

Notes

Arial Black and Impact are generally ugly in bold.
On XP, fonts are rendered essentially the same across browsers.
On OS X, Safari and Firefox render fonts very differently.
Fonts are generally bolder on OS X than XP.
In Safari, Impact and Monaco do not render properly in bold or italics. Similarly, Comic Sans renders in bold but not in italic.
Palatino, Charcoal and Courier are available in OS X only if "Classic" is installed.

Conclusions

There are no absolutely correct fonts, but for maximum compatibility and reading ease I choose the following, which I've illustrated with bold and italic variants.

Best Choices?
sans-serif Tahoma Geneva	My faxed joke won a pager in the cable TV quiz show. My faxed joke won a pager in the cable TV quiz show. My faxed joke won a pager in the cable TV quiz show.
serif Georgia	My faxed joke won a pager in the cable TV quiz show. My faxed joke won a pager in the cable TV quiz show. My faxed joke won a pager in the cable TV quiz show.
monospace 1 "Courier New" Courier	My faxed joke won a pager in the cable TV quiz show. My faxed joke won a pager in the cable TV quiz show. My faxed joke won a pager in the cable TV quiz show.
monospace 2 "Courier New" Courier	My faxed joke won a pager in the cable TV quiz show. My faxed joke won a pager in the cable TV quiz show. My faxed joke won a pager in the cable TV quiz show.
monospace 3 "Courier New" Courier	My faxed joke won a pager in the cable TV quiz show. My faxed joke won a pager in the cable TV quiz show. My faxed joke won a pager in the cable TV quiz show.

Note that the line length of the first monospace example is significantly longer than the other faces. To ease laying our text this should be corrected. Example "monospace 2" adjusts the tracking with "letter-spacing:-0.05em" while "monospace 3" decreases the size with "font-size:0.9em". Use whichever you prefer.

References

For screenshots on different platforms see ampsoft.net. They also came up with some of the specific notes I mention above. A discussion of the Vista fonts can be found at Poynter.