Best Fonts for the Web

November 16, 2006

For years I've been meaning to put together a "cheat sheet" of fonts and font alternatives for quick selection but never got around to it. Today I finally got so tired of Arial and Helvetica that I sat down to write a few out.

Of course, things are never that easy. I forgot to take into account how truly fascinating type is and how much I love fonts.

So, here is the result of my very enjoyable though brief excursion into typography. Each explanation should render in that particular font, if you have it installed.

Serif

Georgia and Times New Roman

Georgia (Windows & Mac). This is an excellent font for the screen, which it was especially made for. Common on both Windows and Mac machines, its alternative usually is Times New Roman (W) and Times (M).

Times New Roman (Windows & Mac). Times is primarily a print font and not the best choice for the web. However, Times New Roman and the Mac version, Times, are often the alternative or second choice for other serif fonts because they are so prevalent.

Palatino

Palatino Linotype (Windows). Although Palatino is not a screen font, it renders very well, even better than Times. Palatino Linotype is included in Windows XP/2000; earlier Windows systems came with Book Antigua, which is very similar to it.

Palatino (Mac). The Mac version of Palatino Linotype is as legible on-screen as the Windows variety. Because Palatino is also installed on Windows as Palatino Linotype, this is a great font to use for the web.

Book Antiqua (Windows). Book Antigua is the precursor to Windows Palatino Linotype. It came installed on earlier versions of Windows and should be included in your font alternate list if you specify Palatino.

Other Fairly Common Serif Fonts

Bookman Old Style (Windows).

Garamond (Windows).

Sans Serif

Arial and Helvetica

Arial (Windows & Mac). This is a common font for both Mac and Windows. Although it was not created for the screen, it renders reasonably well online at larger sizes. It is very similar to Helvetica.

Helvetica (Mac). This font is often paired with Arial, which it closely resembles. However, like Arial, it was not intended to be used for the screen, and it is not as easy to read as other fonts, particularly at smaller sizes.

Geneva, Tahoma and Verdana

Geneva (Mac). Designed for the screen as a replacement for Helvetica, Geneva is a nice font for web pages. Windows' alternatives include Arial, Verdana and Tahoma.

Tahoma (Windows). Tahoma was designed especially for legibility on the screen. It's preloaded on Windows systems. Similar in style to Verdana, it is narrower and more condensed.

Verdana (Windows & Mac). Verdana was designed especially for the screen. A wide, open sans serif, it is considered by some to be the most legible font for the web. Verdana comes on both Windows and Mac systems.

Trebuchet MS

Trebuchet MS (Windows & Mac). Despite the "MS" Trebuchet is common on both Windows and Mac systems. Although it was created especially for the screen, it is not quite as legible as Verdana or Geneva. Still, it remains a good choice for web pages. Often paired with Helvetica.

Lucida Sans Family

Lucida Sans/Lucida Sans Unicode (Windows). Lucida Sans Unicode was not created specifically for the web, but it is a remarkably legible font on screen. Sometimes called just Lucida Sans, it is installed on almost all Windows systems.

Lucida/Lucida Grande (Mac). Lucida Grande is a variation of Lucida Sans Unicode and is the default system font for the Mac OSX. Slightly larger than Lucida Sans, it has become quite popular on the web recently. On earlier Macs, it may be called just Lucida. If you use the Lucida family, you'll want to name all variations: Lucida Sans Unicode, Lucida Grande, Lucida Sans, and Lucida.

Other Fairly Common Sans Serif Fonts

Century Gothic (Windows).

Avant Garde (Mac).

Monospaced

Courier

Courier New (Windows & Mac). This is the most common monospace font, as it is available on both Windows and Mac. On Mac it may also be called just Courier. Often used to display code, it works reasonably well but tends to be too light at smaller sizes.

Courier (Mac). The Mac version of Courier New. It's a good idea to include it in your font list if you specify Courier New.

Monaco and Lucida Console

Monaco (Mac). A monospace font that comes with the Mac OSX. It is actually quite legible on screen, even with longer blocks of text.

Lucida Console (Windows). A monospaced variation of the Lucida font, Lucida Console ships with the Windows system. Like Monaco, it is readable and very common.

Resources