Brian Cray ··· Home > Blog > Design > Master web typography: 8 detailed typography tips for the web

Master web typography: 8 detailed typography tips for the web

One of the most under–rated elements of beautiful Web design is the subtle art of typography. Part of this, I know, is a lack of a solid font support for Web sites. But never fear! Today I'll show you some quick things you can do to appear to be a type master.

1. Stop using straight quotation marks

Straight (AKA ambidextrous) quotes look like this: "Oh happy day this looks as clean as cubicles!" Now compare that with this: Look how these quotation marks are not just stylish but guide your eyes into and out of the quotation.

Straight quotation marks were made to reduce the number of keys on keyboards by being ambidextrous (they could go on either side of a quotation). In short, the engineers took over and style was lost. A typical scenario.

But alas, you can rid yourself of MS-DOS dullsville.

Here's what you do: On the left side of a quotation, type “, and on the right side type ”. Once it renders in a webpage, it looks like this: “My socks typically have holes.”

2. Stop using straight apostrophes

This is similar to the above tip. I've told you. You know. It's ugly and unwarranted from a person of your stature. Instead of taking the easy way out and using the apostrophe on your keyboard, use ’ to create a styled apostophe that looks like:

3. Use a dash instead of two hyphens

Two consecutive hyphens (--) are sloppy and actually interrupt the natural flow of your message. The reader—if only for a second—gets stuck in between those two hyphens trying to make sense of them being back–to–back.

To combat this assault on your reader's cognition, try using an En Dash or an Em Dash—like nature intended.

An En Dash (a dash the length of a capital N: ) is used for:

Make an En Dash with this in your HTML: –

An Em Dash (a dash the length of a capital M: ) is used to indicate a temporary shift in thought, whether in the middle or end of a sentence. Make an Em Dash with this in your HTML: —

4. Tweak letter, word, and line spacing in your headlines

As a Web developer, you have the option to tweak the letter-spacing, word-spacing, and line-height in your CSS. But you probably don't.

By default there's too much white space between characters, words, and lines if your font-size is greater than 16 for a short headline. As font-sizes get bigger the letters and words seem separate, fragmented. They are lonesome. Unify your text with thinner letter and word spacing and shorter line heights. The general rule-of-thumb I follow is to provide just enough space to allow the reader to read the headline. Doing this also adds weight to your headline for nice contrast over body copy.

Try tweaking your letter-spacing, word-spacing, and line-height. You'll be amazed at the impact.

5. Use the EM unit to size your text

When sizing your text in CSS with the font-size property, do you use 16px, 12pt, 1em? or %? Did your head just spin? Sizing text on the Web is not a simple thing. On the Web you have the opportunity to adjust to eyesight and reading preferences.

First off, if you use points (PT), you are probably coming from a print background. Stop using them right on the Web right now. If you use pixels (PX) you're using a relevant measurement, but pixels are a static measurement and thus your readers can't adjust the text size to their preferences.

EMs on the other hand are a relative measurement, and a Web site set with EMs adjusts as the user "zooms" in and out. To learn more about sizing text with EMs, visit PXtoEM.com. Make the switch today!

6. Add extra space between lines

You're driving your users bonkers with your short line heights. More space between your lines will make your body copy less overwhelming and more digestible. As a rule of thumb, I set line heights to 150% the size of my text. Use the line-height property in CSS. Example: line-height: 1.5em

7. On the Web: serif font for headlines and sans–serif for body copy

Now I realize I don't follow this one, but all rules are meant to be broken if you have the knowledge to break them. :) That's what art is about. For everyone else, this provides a good framework.

Serifs are the little accents on letters seen in a font face like Times New Roman. Serifs are there primarily to guide your eye across the letter and through the words (to grandma's house we go). Secondarily, serifs look sophisticated, elegant, or stylish. Sans–serif fonts like Helvetica—or its pour Arial knock-off—don't have these accents. San–serif fonts appear more modern or clean.

So why use serifs in the headlines and sans-serifs in the body copy?

Due to the low resolution of computer monitors relative to printed paper, serifs don't appear in enough detail in lower font sizes—below 16 pixels. But the fonts in headlines sized over 16 pixels are big enough to show off their serifs in a little detail—and in more detail as the font size increases. In smaller body copy, setting text in sans–serif will be easier to read without low&ndashdetail serifs. By the way, take your serif headline a step further: bold it and the serifs will appear even more distinguished.

8. Use a proper ellipsis instead of three periods

Do you ever end a sentence with three periods (...) to indicate an interruption of some kind? Due to the width of the full period character, three periods (...) are too far apart to immediately appear to be an interruption. The correct symbol to use is an ellipsis. To add an ellipsis to your HTML copy use …, which appears like this: