A Beginner’s Guide to Typography: Why It Matters and How to Do It Right

Have you ever noticed that the text on some websites seems to be a part of the design?

It’s clean and spacious, contributing to a minimal feel. Or it’s a grungy font, fitting in with the company’s hip image. Or it’s just a little bigger than usual, making the website seem a little more usable.

A lot of times, you don’t even notice it, but it can have a huge impact on the overall design of your website. Here’s why:

Typography Communicates

The reason letter shapes were first carved out of stone was to share a message.

No, typography isn’t as sexy as technologies like Ajax, Flash, and jQuery. No, it’s not at the forefront of your branding like a logo.

But it is important.

How many times have you gotten irritated with a website because the typography was illegible? Maybe it was too small, maybe it was one of those indecipherable handwriting fonts, maybe it was spaced too closely together.

Whatever the case, you left, and their chance to communicate with you was gone forever. All of their hard work to build the website was invalidated, simply because of a few poor typography decisions.

Don’t let the same thing happen to you.

You might feel like a kid in a candy store looking at a bunch of shiny, new letter forms. You might think, “I’ll take one of these, and one of these, and one of these …” and before you know it, you have stomach ache.

To avoid going crazy with all the new font choices, learn a few basic rules of typography. They will help guide your choices and show you how to set beautiful type on your websites.

Two to Tango

Combining too many different typefaces on one page gets visually messy. Pick just two typefaces: one for your headlines and subheads, and another for your body text.

Your body text font is the most important. The bulk of your information will be communicated here, and you want people to stick around, right?

So pick a font that’s easy to read.

Find one with a large x-height: this is the space between the baseline letters sit on, and the bowls of lower-case letters like b, h and d. The larger and more open the x-height of a font, the easier it is to read.

When choosing a body text font, be sure to look at on-screen text-sized samples. Don’t pick your body text typeface based on a 48 pt. sample: look at it small, and make sure it’s readable.

Your headlines and subheads will be shorter, so the font you choose for them can be a little more fancy. Headline and subhead text is set larger, too, so even a decorative font will be more readable.

Contrasting or Similar?

When you’re looking at two typefaces to use together, check their letterforms. It’s best to combine typefaces that are either very similar in form, or very different.

To use an example with web-standard fonts, setting your body text in Georgia and your headline text in Arial Black works. They’re obviously different, and the contrast between them adds interest, and makes it easier for your reader to skim from headline to headline.

Setting the same page with Georgia for body text and Times Roman for headlines would be a big mistake. Times Roman is too similar to Georgia, and doesn’t provide enough contrast. They’re different, but not different enough.

On the other hand, using Georgia for your body text and Georgia Bold for larger headlines works. Using different weights and sizes within the same font family works because those letterforms are drawn to go together.

Set It for Readability

Once you’ve chosen your new fonts and are ready to set them on your page, remember a few typographic rules to make the reading experience as pleasant as possible.

Larger is Better: Think about your target market. If your site appeals to people who are over 40, consider setting your type on the larger side of what you might think. It’s easier to read, and doesn’t cost you anything to present this way.

Dark on Light: Use dark type on a light ground for comfortable reading. If your site is for a nightclub or a musician, people aren’t really visiting it to read it, so go ahead and use light type on a dark ground if you must. For those of us who want our visitors to read though, dark type on a light background is best.

Avoid Justification: Justified type is aligned along the left and right sides. It’s most often used in newspapers, where column widths are narrow. In order to justify lines of type, spaces are inserted between words to push them to either side.

I know lots of folks like the look of justified type. The reason I don’t like justification is that the spaces inserted are random, and vary from line to line. This makes for an uneven reading experience. It’s always best to establish an even, predictable “rhythm” to your lines of type, and flush left typography does a superior job of offering a smooth, even read.

Smooth, Even, and Predictable

That could be the theme of this typography post, actually. Smooth, even, predictable typesetting is what you should aim for, because it will communicate best with your reader.

Choose no more than two fonts so you establish a visual style that’s memorable. Utilize either similar or contrasting styles, and make your choice obvious. Set your type with readability in mind.

There’s a lot more to the mastery of typography, sure. Many professional website designers have several complete books on the subject.

But this will get you started. If your primary concern is communicating with your reader, these tips will make sure your text is clear and easy to read.

And really, that’s what’s most important.

About the Author: Pamela Wilson has designed with type for 25 years, and she shares her know-how at the Big Brand System.