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.

  1. Typography is really an under appreciated art. Beautiful font selections are at their most beautiful when they go unnoticed. They just blend into the overall design of the page.

    Thanks for the article!

    • Pamela Wilson Aug 30, 2010 at 8:39 am

      I agree, Alex: beautiful typography is subtle, but it lends authority like almost nothing else. Thanks for your comment.

  2. Jason Wietholter Aug 30, 2010 at 9:35 am

    Typography can communicate so much without the reader consciously comprehending it. It sets the mood for your site or blog and nothing is more detrimental than typography that is out of place.

    Two font faces/weights is a good rule of thumb for the content, but what do you think about a typography based logo (or maybe this is going to be another post) – should it play to the same rules or can it break within reason?

    • Pamela Wilson Aug 30, 2010 at 12:16 pm

      Jason, I try to stick with no more than two different typefaces for logos, too. You’re working with less letters, so keeping it cohesive is even more crucial.

      • Jason Wietholter Aug 30, 2010 at 12:26 pm

        That’s what I was thinking. Knowing the rules and the reasons why helps in knowing when you can break them and make it work.

        Thanks!

  3. Great post- helpful, easy to understand information for lovers of type and for newbies.

    Typography is one of those little things that can make a big difference delivering the message you want.

    • Pamela Wilson Aug 30, 2010 at 12:17 pm

      Thanks, Elizabeth! There’s lots more to talk about when it comes to typography: I’ll save it up for a future post!

  4. At last! I was looking for a post like this, but couldn’t find one that explained it succinctly.

    I love typography, so it’s easy for me to just want to use everything. And I’m still on the lookout for the best font to use in an ebook.

    Hopefully there will be another post on typography. (hint)

  5. Mary Flaherty Aug 31, 2010 at 7:01 am

    “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.”

    Oh, thank you, thank you! I hope people will heed your advice and pay attention to the typography they use on their websites. I’ve been reviewing professional service firm websites for a project and can’t tell you how many sites are using a teensy-tiny, completely illegible (to me) font. Argh. Yes, I’m in that demographic where font-size matters — and that’s also the demographic many of these websites target.

    • Pamela Wilson Aug 31, 2010 at 11:34 am

      I’m there, too, Mary. On the web you don’t have to worry about increased printing costs just because you bump up the point size, so I say make it easy!

  6. How, what’s the font you use for the Kissmetrics logo?

Comments are closed.

← Previous ArticleNext Article →