You look at two sites. At first glance they look very similar, but the more you look the better one comes across. You look again and can’t quite figure out why. They’re laid out similarly, as so many websites are. The images are about equal in quality. Yet, one just works better. Chances are very good that the difference comes from the care with which the typography of the better looking one is designed.

Typography for the web is most definitely not the same as typography for print. When I first got into web design that bothered me greatly, as it does for most designers who make the transition. There just isn’t the type of absolute control available on a web page that there is on paper. When you send something to the printer you can reasonably assume that the output from a print run will all look almost identical. You might find a slight difference in the density of ink at the beginning and end of a run but all the text will be the same size and in the same place with the same font face.

That ability to reliably reproduce your design simply isn’t possible on a web page. You aren’t printing a web page but sending suggestions to your visitor’s browser about what font and font size to use. So the first thing to remember is that your page will look different to different visitors. If you don’t like that, well, you’ll just have to get over it.

Some challenges with web typography

• Web text is more difficult to read than printed text.
• Every screen can have a different resolution, measured in pixels which may or may not have anything to do with the size measured in inches or centimeters.
• Every screen will display your page with a sightly different color cast.
• You don’t know what those values will be.
• Your visitor can change either of the above settings.
• You don’t know what fonts your visitor will have to display your text anyway. Though you can make informed guesses.
• Any animated element on your pages will make reading more difficult.

Let’s look at these issues in a little more detail.

Screen resolution on modern displays runs typically somewhere between 95 to 100 pixels per inch but it can be lower or higher. A modern laser printer can print between 600 and 2400 dots per inch. That constitutes a huge difference in sharpness. Add into that the fact that computer screens flicker, even if ever so slightly and paper doesn’t, you will find a pretty measurable drop of in legibility between paper and screen.

What makes this more difficult is that you don’t know how big your text will look on the screen. A micro-notebook can have the same number of pixels in a 12″ screen that a CRT desktop monitor has on a 17″ screen. What’s perfectly legible on the desktop is tiny on the laptop.

And, we’re only talking factory settings here. Changing monitor resolution is easy to do and will mess with your effective font size even more. That can either be done on a computer wide basis through the System Preferences or on a site by site basis in the web browser. If I don’t want to hunt down my reading glasses, I often just change the font display size in my browser. On any modern Mac, that’s the Command + = keys.

Another problem with typography is that your visitor can only display fonts installed on her computer. You may love Microgramma Extra Bold for a headline but if your visitor doesn’t have it installed, she’ll see Helvetica, or maybe Verdana, or maybe something else you’ve never heard of.

So in practical terms web pages are limited to a handful of very common fonts. For serif fonts we have Times, Times New Roman or Georgia. For sans-serif fonts you can count on Arial, Helvetica, Verdana, MS Trebuchet and possibly Tahoma. For monospace fonts there’s the old standby Courier and probably Courier New and Andale Mono, though the latter doesn’t look great on Windows. Add in Comic Sans for a grade school look and you’ve pretty much exhausted your choices.

Any other fonts will have to be displayed as either an image of Flash if you expect your visitor to see what you want. That’s not the total horror story that some accessibility fanatics claim but should be used sparingly, mostly for branding purposes to match your print literature. That’s both because it is much more time consuming to create images along with alternate text of those images, and those images hog bandwidth.

Another problem with text use is not so much a typographic concern as a usability/accessibility one. As more and more web sites use Flash or embedded movies or even animated gifs, text readability drops quickly. If the page is totally you own, you can simply omit those elements from text heavy pages. If you are running any third party advertising besides text adds, like Google’s AdSense, you will have to plan around that decreased readability.

What to do

There are a few simple guidelines that will greatly enhance the legibility and attractiveness of your text.

Learn to love whitespace

Whitespace isn’t necessarily white. It’s the term for blank or empty space on your page. The more you cram on your pages, text or images, the more difficult the pages will be to read. Amazon.com may be able to get away with filling every available square millimeter of page space but they don’t get visitors because of page legibility. There is no absolute rule but if you can figure a 20%-25% whitespace allowance, you’ll do pretty well.

Use a large enough font size

For some reason it’s been fashionable to use tiny font sizes on web pages. It doesn’t make pages either attractive or easy to read. The default size of 16 pixels is a bit big but sizes of less than 10 pixels can’t be easily read on a tight monitor like a 12″ iBook or other small laptop. The standard font size of 12 pixels in Word more-or-less translates to 12 pixels on a web page. That’s a pretty good starting point for main body text.

Limit line width

There have been many studies on readability conducted for both page and screen. Those tell us that using more than 12 words per line makes text progressively more difficult to comprehend. That’s why magazines and newspapers use columns. That’s why it’s a good idea to limit the width of text areas too. With common font sizes that translates to about 400-500 pixels maximum width.

Set the line-height property in your style sheet

CSS offers some typographic controls that make on-screen text easier to read. Line-height is on of those. Most browsers default to about 130% of the font-size for line height. Nudging that up another 10% can greatly increase readability.

Use Sans-serif fonts for body text

Your visitor’s browser is probably set to display your text in Times New Roman if you don’t specifically define a font face for your pages. On a printed page, a serif font like this is easier to read. On a computer screen, because of its limited sharpness, it’s harder. San-serif fonts, specifically designed for screen use, are easier to scan. Any of the common ones work fine. Pick the one that best fits your design.

Leave margins around text

This is really just a specific case of using adequate whitespace, but bears emphasizing. Make sure that inline images have space between them and your copy. Leave a noticeable margin between columns or side bars. A distance equal to your font size is a good rule of thumb.

Use Headings

If you need to emphasize something make it a heading or headline. This not only makes your page easier to scan, it makes search engines happy.

Make paragraphs short.

While this and the previous tip fall more under writing styles than typography they make your pages easier to read. People scan web pages. Short blocks of text are easier to scan. Your old grammar teacher may scream at this, but it’s perfectly okay to use one sentence paragraphs on the web.

What not to do

Color text for emphasis

You’ll see different colors of text on those long sales pages that give you Three More Great Reasons to Order NOW!!!. Nobody else does this and there’s a good reason. While it may draw attention to specific phrases, it slows down the flow of the page. Another problem is that we can no longer predict what color links will be and people will click on colored text expecting it to be a link. Since this doesn’t do anything, you run the risk of frustrating your visitors.

USE ALL CAPITAL LETTERS FOR HEADLINES

All caps are the web equivalent of shouting. They are not only considered a bit rude but make your text much harder to read. Capitalizing each word is fine as long as you are consistent, something I have problems with. But all caps are just tacky. Use heading and your text will be larger and bold. That is plenty to draw attention.

Underline text for emphasis

As with colored text, underlined text is often associated with links. If you underline text you are telling your visitor that they can click on the phrase and expect something to happen.

If you need to emphasize a word or phrase, making it Bold or Italicized should be enough. If it’s not pull the phrase out and make it a headline.

Center align everything

Nothing screams amateur faster and louder than center justifying your text. Left aligned text is easier to read and looks more professional. Captions on photos are fine to center under the picture. Other than that, don’t do it.

Use strongly patterned or textured backgrounds.

This works just like that last tip. Anything that makes your page harder to read decreases its effectiveness.

Use just color to distinguish text from background

Using different colors is okay if there is also enough contrast. But there are enough colorblind people and people who may use a B&W monitor that you can’t count on just color difference alone do the job for you.

Ending this

This just covers the basics of using text on web pages. It should keep you from making any major mistakes.

Typography is a complex and multi-faceted subject that people spend years learning. Some of the fine details people debate seem pretty esoteric to me, but there’s no doubt that a grounding in the basics can greatly enhance any web design.

For more see Web Typography

Possibly related:

This entry was posted on Thursday, April 20th, 2006 at 4:31 pm and is filed under Design Theory. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.