Main Sections:

Mistake No. 1
Graphic Type
Readable Type

In this Section:

Best faces
Setting type

Download Georgia and Verdana, the best fonts for the web, for free!

size and space

The two keys to making type readable are size and space.

You can use any font you want, no matter how complex or wacky--if you use it large enough.

But the best size to use for body text is the default browser size, normally +0 or "12"

When you choose the default size, your visitors will see type set in the size they chose for their default--hopefully the size that's most comfortable for them and easiest to read.

You can go one size smaller (-1 or "10") but I've found from thousands of reader letters, that readers are happiest when type is at the default size. They're so pleased that it's easy to read and can't figure out why it is on your site but not others.

People would rather have larger type and scroll than smaller type and not scroll.

Biggest size don't - Points and Pixels

If you use CSS to specify the size of your type, do not use points or pixels as your unit of measure. This is a common mistake, and a bad one.

When use you points or pixels, you lock out the browser's ability to make type larger and easier to read, so people are stuck with your size--which if you look around at sites that do this, is inevitably too small.

Points and Pixels also create cross-OS problems. Font sizes on the Mac and Windows are different, and when you lock them in with these units of measure, they're going to appear too small on one system, and too big on another.

So what do you use? Ems or %. an Em is the width of the upper case letter M in a font. This is a standard graphic design term (even if you haven't heard of it). Ems are scaleable, based on the visitor's default browser size.

Percentages are just that--percentages of the default browser size. This means if people set their font larger, your sizes are scaled appropriately. So say your body size is the default, and your headers are 200%, they'll be twice the size of the default text.

If you use these settings you can still set type with precision, without locking people into type sizes they find hard to read, which can cause them to leave without reading.

Line Length

One key to easy to read type is line length.

The optimal length of a line of text should be between 40 and 70 letters long. Shorter than that and it's disruptive. Longer than that and people have a hard time finding the next line, so it slows reading.

If you use the default browser font, a good rule of thumb is that your text blocks should be around 400 pixels wide.

You may get a few people asking, "Why doesn't the text run from one side of my screen to the other," as if you are wasting space somehow. But if you did have very long lines, fewer people would read, and this would defeat the purpose of your site!

Horizontal Spacing / Tracking

Using CSS, it's also possible to change the "tracking" of type--the amount of space between letters.

Because of the low resolution of the computer screen, letters that touch are doubly hard to read, so having a tiny bit of space between each letter, so they're distinct, is a real advantage. Georgia and Verdana have this.

If you use default fonts, you don't need to add extra tracking, and you should not tighten the tracking to make the letters closer. It's a huge mistake that's guaranteed to make it harder to read your text.

Use web-safe, undithered background colors and low-contrast backgrounds

Solid colors are always less distracting, but low-contrast images can work for pages that use large text.

The easiest-to-read text is black text on a white background. Patterned backgrounds decrease readability, so consider putting your graphics on the side, rather than under your text.

Some people claim that lightly textured backgrounds help readability. But in reality, thee added "visual noise" and cluttered of these backgrounds really just makes each character less distinct and more difficult to read. So, keep your backgrounds pure.

Don't set type
in colors other than black

People confuse colored text for links--and text set in colors is harder to read than text set in black.

(at least till the technology changes
and it's always changing...)

Will-Harris Home

WebFonts Home
Will-Harris House Home

(c) 2005,  Daniel Will-Harris
all rights reserved