Self-Publishing

Effective Type Design for the Web

You’re limited. But here are 24 things you can do.

Designers hate text on the web. Unlike print typography, with HTML you can’t:

• use a variety of fontsYou can embed uncommon fonts in web pages using WEFT, but only Internet Explorer is supported.
• use expert sets
• kern
• use baseline shift
• use ligatures
• make tiny adjustments
• display text in high resolution (most monitors are 96 dots per inch; print is often 2,400 dots per inch)

You can avoid these limits if you use images or Flash instead of text. But you should use text.You can have the benefits of printed type and web text with sIFR. sIFR is perfect for many sites. Here’s an example. But it still (a) requires Flash, and (b) loads slowly if used for anything but headlines and pullquotes. So, I don’t use it.

Benefits of text

• Fast. Text downloads instantly. Images can be 100× bigger in file size.
• Can be indexed. Computers understand text. They can analyze, search, replace, sort, convert, translate, and change text. Not so with images. And of course, text lets search engines find you.
• Portable. Text can easily be shown on mobile phones. Often, graphics can’t.
• Can be seperated from design. If you redesign a graphic site, you have to remake all the graphics. If you redesign a text site, you just change a few things in your CSS.
• Clear. Graphics can be ambiguous. What does a magnifying glass mean? Zoom in? Filter? Search? Write Search, though, and your meaning is clear.
• Can be copied and pasted.
• Accessiblility. Computers can read text aloud to the blind.

So, using text is a good idea. As designers, let’s make the best of it. How can we make our online text legible and attractive?

1. Use strong alignment.
2. Use short lines.
3. Use fixed width.
4. Left-align text.
5. Use the right fonts.
6. Use the right sizes.
7. Use contrast.
8. Improve paragraph spacing.
9. Improve word, letter, and line spacing.
10. Improve initials.
11. Simulate kerning.
12. Use drop caps.
13. Improve lists.
14. Improve linked text.
15. Improve numbers and acronyms.
16. Use the right emphasis.
17. Use the right spaces and dashes.
18. Hang your punctuation.
19. Use foreign letters.
20. Improve ordinals.
21. Use curly quotes.
22. Use symbols.
23. Improve blockquotes.
24. Use pullquotes.

Or, skip to the summary.

This tutorial assumes basic knowledge of HTML and CSS.

Use strong alignment

Align your elements to strong lines. Bad designs have weak lines, and too many of them:

I count 11 different vertical alignment lines for text, including 3 in a single paragraph! It’s a weak design.

A well-designed site uses a few strong lines:

Few lines. Strong lines. Good design.

This is why centering text is not a good idea. Align all text to the left or right of a section to create stronger lines.

Use short lines

Most people agree that a line length of 45–90 characters is ideal. My articles are 590 pixels wide, or about 75 characters with my chosen font. This leads to my next point . . .

Use fixed width

With a fixed width, pages are always the same width. With a liquid layout, pages stretch with the size of the user's browser.

Benefits of fixed width:

• Pages look like the designer designed them.
• Images will not overpower text on small monitors.
• Line length remains constant and readable.

In a liquid layout, text expands to use the available space. In Photoshop, I want to use all available space. When reading, I do not. Long lines of text are hard to read.

This is what John T. Reed’s site looks like on a large monitor:

The lines are 25 words long! That’s unreadable.

So, I used fixed width.Or, you can set the page width with ems, like this.

Left-align text

We want a strong alignment, so we should align both edges of our text, right?

Not on the web. HTML and CSS do not allow automatic hyphenation, so your words will be oddly spaced if you justify. Left-align your text. Leave the right edge ragged. This also improves readability.

Use the right fonts

On the web, you’re limited to the fonts a user has on her machine. Only a few fonts are common to all machines. Choose among those.

There are two types: serif and sans-serif. A serif is a small decoration at the end of the main stroke in a letter. Compare:

Serifs look great in print. I think sans-serifs look best on the screen. See The Anatomy of Web Fonts for more details.

Use the right sizes

Font size is also important. Some studies show that 10-, 12-, and 14-point fonts are equally readable, but I prefer big sizes for body text. My older readers thank me.

Your headers should be bigger, or set apart in some other way.

Set font sizes with relative, not absolute, terms. Use % or ems. Here’s why.

Use Typetester to see how your combinations of font style and size will look on screen.

Use contrast

Use strong contrast between the background and your text. Black over white is the most legible. White over black is decent, but note that the letters look smaller. In general, legibility will get worse as you (a) increase background texture and (b) decrease the contrast between background and text.

This site uses near-black over white. My font color is #444.

Improve paragraph spacing

Don't just put a full blank line between paragraphs. It looks amateur. Adjust your paragraph spacing with something like this: p { margin-top: -0.2em; }

Improve word, letter, and line spacing

Leave word spacing and letter spacing as they are. The only exception is that you might want to adjust letter spacing for headers. Example.

The default line height is about 1.2em. The longer your lines of text, the more line spacing you should have. I prefer: line-height: 1.3em;

Improve initials

Which is better: J.R.R. Tolkien or J. R. R. Tolkien or J. R. R. Tolkien?

I prefer the third, which has a thin space ( ) after the 1st and 2nd dots. But the first, with no spaces, should work okay.

If you use a thin space, remember to keep it from wrapping.

Simulate kerning

Kerning fits certain letter pairs more tightly. For example:

West Toronto or
West Toronto

The first is a better because the first two letters of each word fit better. I kerned them by calling on .kern { letter-spacing: -0.1em } for the W and the T.

Normally, you don't need kerning. Fonts come with their own kerning tables. You should kern consistently and modestly or not at all. I choose not at all.

Use drop caps

Drop caps, like those used in magazines, are a stylish way to open an article or section. And the CSS is easy. Below is the code for this paragraph. Be sure to try different sizes, line heights, fonts, margins, and colors.

<p><span class="dropcap">D</span>rop caps, like those used...
.dropcap { float: left; color: #D4D4C7; font-size: 440%; line-height: 1em; margin-top: -0.06em; margin-bottom: -0.1em; font-family: Times, serif, Georgia; }

Improve lists

Default-style lists are boring. For this site, I changed list-style-type to circle because the default bullet is too heavy. You could use your own image, too: ul { list-style-image: url(bullet.gif) }

I also like to put some extra space at the bottom and top of each list:

ul { margin: 1.2em 0 1.5em 0 }

and between each list item:

ul li { margin: 0.9em 0 0.9em 0 }

Of course, there is much more you can do. See Taming Lists and the example lists at Listamatic.

Improve linked text

Change the colors of a:link, a:visited, a:active, and a:hover as you like. Make them consistent with your site’s design. I left the colors unchanged for my site because that’s what users are used to. Remember Jakob’s Law of Web User Experience: “users spend most of their time on other websites.”

I did change the underline. I think a solid underline is too attention-grabbing. I use a dotted underline. You could also use a dashed underline. Code:

a:link { border-bottom: dotted #0000FF 1px; text-decoration: none; } a:visited { border-bottom: dotted #800080 1px; text-decoration: none; } a:active { border-bottom: dotted #FF0000 1px; text-decoration: none; }

But I didn't want underlines or borders on linked images, so:

a.hasImage { border: 0 none } a:link.hasImage { border: 0 none } a:visited.hasImage { border: 0 none } a:active.hasImage { border: 0 none } a img { border: none }

Then:

<a class="hasImage" href="/page.html"> <img src="thingie.jpg"></a>

Improve numbers and acronyms

Compare:

NAMBLA says 9000 of every 100000 men suffer from ADHD.

NAMBLA says 9,000 of every 100,000 men suffer from ADHD

The second one is better. I say:

• Put acronyms in Small Caps. All-caps draws too much attention.
• Make numbers smaller for the same reason. CSS: .num { font-size: 85%; }
• Use the thousands seperator in numbers.

I don’t change numbers in headlines.

Or, to get text figures, use the Georgia font.

Use the right emphasis

Use emphasis sparingly. A whole sentence with emphasis is hard to read.

Bold works best, but can overpower a page if used too often.

Italic is hard to read because screens are low resolution compared to print.

Avoid underlining. Users will think it’s a link. And don’t use color too much. Color is also associated with links.

Never use ALL CAPS. It’s hard to read. Look: turtle and giraffe have distinct shapes, but TURTLE and GIRAFFE have the same shape.

For the strongest emphasis, surround a short line with lots of white space. You’ve seen those ads in magazines. You can’t not look at them.

Use the right spaces and dashes

Prevent wrapping. What if you type a phone number near the end of a line? Half the phone number will be on the first line, and the second half will wrap to the second line. You don't want that. Use: .nowrap { white-space: nowrap; }

I also prevent wrapping for Bible references, for example in Top 20 Evil Bible Stories. Dates and times shouldn’t wrap, either.

If you just have two or three words you want to keep together, use a non-breaking space: Mr. Rogers

Ellipses. Most people just type three dots... like that. Others use the … character… like that. Both are too tight. Better is three dots, each preceded by a ¼ em space . . . like that. Code:  . . .

Of course, you don’t want the ellipsis to be broken by line wrapping, so: <span class="nowrap">&#8197;.&#8197;.&#8197;.</span>

That’s a lot to type for each ellipsis. Make your job easier with text replacement. Many text editors, like PSPad, have this feature. So do many shell enhancements, like AutoHotKey.

For example, here's a piece of my handy setup:

I use PowerPro for text replacement. This tiny program is the most powerful shell enhancement for Windows. It will walk my dog if tell it to.

Hyphens. Hyphens are for compound words like second-place, or phone numbers. But dots often look better in phone numbers.

En dashes. An en dash shows spread or duration, e.g. “3–6 people are invited to dinner from 7–10 PM.” It should also replace a hyphen in a compound adjective when one of the items is two words or a hyphenated word. Example: “She took the New York–London plane to the post–Fischer-Kasparov show.”

Em dashes. Em dashes set off an emphatic phrase—like this—from the rest of the sentence.

There are other types of dashes and spaces, too.

Hang your punctuation

This looks okay:

“Alien? Me? Is that some kind of weird earththling joke? I'm not an alien! Of course not!”

This looks better, because the text is aligned:

“Alien? Me? Is that some kind of weird earthling joke? I'm not an alien! Of course not!”

When a paragraph begins with a quote, indent to the left. My CSS: p.hang { text-indent: -0.44em }

I chose -0.44em because that looks right to me at every font size.

Use foreign letters

Check yourself:

• résumé, not resume
• cliché, not cliche
• déjà vu, not deja vu
• façade, not facade
• El Niño, not El Nino
• vis-à-vis, not vis-a-vis
• débâcle, not debacle
• etc.

You can type these characters with special keyboard combinations, or use the HTML code. Here’s a handy chart.

Improve ordinals

Compare:

This was the 2nd time the 5th-place contender had won.

This was the 2nd time the 5th-place contender had won.

It’s only a matter of taste, but I prefer the second. It’s done simply:

.super { vertical-align: super; font-size: 0.7em; }

Use curly quotes

The quotation marks on your keyboard are for typewriters. Don’t use them. Compare:

"Don't call me 'Shirley,'" she said.

“Don’t call me ‘Shirley,’” she said.

The second one is better because it uses the right punctuation. It uses curly quotes (smart quotes) and a curly apostrophe.

Use HTML character codes.

It's better to use these codes than names or Unicode characters. Here‘s why.

Use symbols

There are some other symbols you’ll need that aren’t on your keyboard.

Don't you agree that ¾ looks better than three-fourths or 3/4?

See the full list of symbols.

Improve blockquotes

A good blockquote uses curly quote images to set off its text from the rest.

Here’s the code:

<div class="block1"><div class="block2"> <p>Let freedom ring. And when this happens...</p> </div></div>
div.block1 { margin-top: 20px; margin-bottom: 20px; margin-left: 10px; background-image: url(/images/start_quote.png); background-repeat: no-repeat; background-position: top left; font-family: Georgia, serif; } div.block2 { padding-left: 30px; padding-right: 35px; margin-right: 40px; background-image: url(/images/end_quote.png); background-position: bottom right; background-repeat: no-repeat; }

I didn’t even use <blockquote>The normal way of making a blockquote is explained here.. In my experience, it’s not flexible enough. Instead, I used my own div classes. Here, I can adjust the position of the curly quotes with margin-left and margin-right, and the edges of the text with padding-left and padding-right.

Because I want strong alignment, I aligned the text of my blockquotes to the text of my lists.

Use pullquotes

A blockquote is a long quote from another source. A pullquote is a short quote from the section the reader is looking at. a pullquote is a teaser of what’s in the textIt’s meant to be a teaser of what’s in the text. Use only one or two of them per page. Put your most interesting phrases or sentences in pullquotes to entice the reader to read the whole piece. Because I keep my paragraphs very short, I don’t use pullquotes. But if you write longer paragraphs than I do, you might like to put exciting teasers in pullquotes to make big chunks of text look more appealing.

Here’s the code, which I took from blogsolid:

<p>A blockquote is a long quote from another source.
A pullquote is a short quote from the section the reader is
looking at. <span class="pullquote">a pullquote is a
teaser of what’s in the text</span>It’s
meant to be a teaser of what’s in the text...
.pullquote { padding: 10px; float: right; width: 200px; margin-top: 10px; margin-bottom: 10px; margin-left: 20px; border-top-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-bottom-style: solid; border-top-color: #694e1c; border-bottom-color: #694e1c; font-size: 1em; text-align: center; line-height: 36px; font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: normal; }

Summary

Use text in a well-aligned, fixed layout. Each line should be left-aligned and 45–90 characters long.

Use sans-serif fonts in relative size. Give strong contrast between the background and your text.

Shorten paragraph spacing and increase your line height. Simulate kerning and use drop caps if you like. Change your list design.

Make your link colors consistent with your site. Change the underline to dashed or dotted if you think a solid underline is too strong.

Shrink numbers and acronyms. Use the thousands seperator in numbers. For emphasis, use bold and italic sparingly, and don't use underline, color, or ALL CAPS.

Use spaces, ellipses, hyphens, en dashes, and em dashes correctly. Hang your punctuation. Use accents and foreign letters. Superscript ordinal suffixes. Use curly quotes and symbols.

Design attractive blockquotes and pullquotes.

And remember, our text should not just be legible and attractive, but also readable. See The Art of Plain Talk and How to Write for the Web.

More Resources
Examples of Web Typography
All you wanted to know about web type but were afraid to ask
CSS Zen Garden
The Future: Web Fonts
Smashing Magazine
The Elements of Typographic Design applied to the web