What makes a good web (text) font?

A good web text font makes no excuses.

It never says, “If only you could see me in print.”

A good text font usu­ally has:
a gen­er­ous x-height,
open coun­ter­forms,
and a gen­er­ous aperature.

It has gen­er­ous let­ter spacing.

It does not have thin strokes or del­i­cate ser­ifs
(which can get lost on the screen).

Nor does it have stri­dent ser­ifs or ter­mi­nals
(which draw atten­tion to them­selves and under­mine the flow of words).

Test­ing Fonts

Many fonts avail­able for font-linking are lively and sub­tle, but lose leg­i­bil­ity on the screen.

Thus, all rec­om­mended good web fonts have been tested (on OSX, Win­dows XP, Win­dows Vista, Win­dows 7, and Ubuntu) using a web font spec­i­men page. The test­ing is done via crossbrowsertesting.com. Par­tic­u­lar atten­tion is paid to Win­dows XP (Safari, IE8, IE7), Win­dows 7 (IE8) and Win­dows Vista (IE8); due to font ren­der­ing, this is where many fonts lose legibility/quality. I also test on Chrome on Win­dows and Mac.

Learn more about leg­i­bil­ity from Typo­graphic Web Design.
(View in Adobe Acro­bat to use rollovers for font comparison.)

Some lovely fonts don’t make the cut.

While I try to pick good web fonts based on leg­i­bil­ity and qual­ity, I know per­sonal pref­er­ences play a role in choos­ing fonts. On the flip-side, I know there are absolutely beau­ti­ful fonts I’d love to rec­om­mend, but they just don’t hold up the way I want them to on screen. Thus, I also pro­vide a list of  lovely fonts that didn’t make the cut — while not my first choice, they might work for you.

Comments are closed.