Plain old publishing is still an enormous chunk of the web; and if you are writing on a website, your words will need to appear on the screen in some font. How do you choose which font to use?

Let’s see what happens if you don’t choose.

If you don’t choose a font, one will be chosen for you. It could be chosen by whoever wrote your blogging platform. It could be chosen by the theme designer. Even if you write plain HTML, with no CSS at all, the browser must display the text using some font. So it could be chosen by the browser author.

Not choosing means leaving the choice to someone other than you. You don’t want to leave such an important decision to chance, but you don’t really know anything about fonts. What do you do?

Punt

One option is to just punt and look for pre‑existing designs for whatever platform you’re using. For example, Wordpress has a vast amount of themes, some of them good. You’ll still have to choose a design, but now you won’t be focusing on the font, you’ll be looking at the overall website design.

You can also hire a designer to choose for you. This option might be better for some people. But finding a good designer is hard or you might not have the budget to hire a good one.

A Crash Course in Types

If you hang around designers long enough, you’ll hear terms like “Humanist” and “Grotesque” used to describe typefaces. If you want to make sense of all of it and learn how to use typography, read Thinking with Type.

But if you want to keep it simple and just choose a damn font, keep reading.

Serif vs Sans‑serif

A serif is what those little lines at the end of the letters are called. For example, this is Times New Roman, with the serif highlighted in red.[1]

serif

And this is Helvetica.

sans serif

It doesn’t have those little lines, so it’s called sans‑serif. The first major decision you are going to have to make is whether to use a serif or sans‑serif font.

If you search around in the Internet and read about serif vs sans‑serif, you will become utterly confused. I know I did.

One of the funniest articles I found went to great lengths to argue that serif was the one‑true‑answer for text. The article itself was typeset in sans‑serif!

Let’s examine two of the most common myths you’ll find in the battle between serif and sans‑serif typefaces:

Serifs should only be used in print because of screen resolution

Maybe back in the ’80s that was true, but this is 2015 and we have retina displays. Trust me, modern displays have no trouble drawing the serifs.

Serifs are easier to read

There have been studies concluding that serif is more readable than sans‑serif. Most of them are flawed. What matters for legibility is choosing a typeface where different letters are easy to tell apart.

I’ve seen a lot of websites typeset both in serif and sans‑serif. You can make beautiful websites or horrible websites with either.

I think it’s just a matter of preference. Choose what you like and move on.[2]

Choosing a Typeface

So how do you choose? The simplest way is to use some simple criteria of what you want out of the typeface and then choose based on aesthetics.

Here are some guidelines on what to look for in a typeface.

Does it come with separate styles and weights?

When you emphasize text by using italics or bold, you want it to be legible and beautiful. If you take a regular typeface and just slant it, it will be neither. Likewise, just making the lines in a typeface thicker won’t get you good bold text.

Good typefaces have completely different glyphs for italics and bold. Look at the letter ‘a’ in normal, italic, and bold, typeset in Helvetica on the left, and Times New Roman on the right:

normal bold

The bold ‘a’ in Helvetica ends differently than the normal one. And the italic ‘a’ in Times New Roman is completely different.

If a typeface doesn’t have different styles, browsers will just slant the regular typeface when asked for italics. Without a bold style, browsers will just make the lines thicker when asked for boldface. This is a crime.

Is there enough difference in confusing letters?

Quick, what do these instructions say?[3]

gill sans

Is it more clear below?

Dilute 11ml in 1l of water

The first is Gill Sans, the second is Chronicle.[4] In certain cases, this is a minor point, but if you are writing technical content you don’t want the typeface causing confusion.

Typically troublesome letters are:

  • 1, l, and I.

  • O and 0

  • a, o, and g

Did you have trouble telling the letters apart? The font I used for the troublesome letters above is Inconsolata. I’ve written about it before.

Does it have special symbols? Do you like them?

Most typefaces have basic punctuation marks and some simple non‑latin characters. If your content makes use of greek letters, or you need special punctuation, the typeface you choose better have those extra glyphs.

There is also an element of personal preference for specific glyphs. I like curly quotation marks. They don’t look good in every font, but I like them enough that I’ll change the font until I get them.

Some punctuation to pay attentiont to:

  • Typographical quotation marks.

  • Question marks.

  • The letters ‘a’ and ‘g’.

fonts sans
Optima, Futura, Helvetica, and Gill Sans
fonts serif
Baskerville, Didot, Georgia, and Times New Roman

Perhaps the most important advise is to start noticing typefaces. If a designer has done her job right, you won’t notice the typeface, it’ll be invisible and support the content. But if what you’re looking for is choosing a typeface, you need to start paying attention.

Maybe you’ll start discovering that you like the curly quotes better than the straight ones, or that the roman ‘g’ looks better. All of those preferences will help you have your own style.

Does your content feel balanced?

This is the trial by fire. Take some article you’ve written and use a font you think you like. Chances are you’ll be horrified at the result. Don’t despair, you need to tweak things like the inter‑letter space, inter‑line space, and line‑width in order to have a good result.

But before you start messing with spacing, get a feeling for whether the font works on longer content or not. If it doesn’t, ditch it and try something else.

On the web, what Fonts are available?

Most of us are used to using whatever fonts came with our computer. The operating system manufacturer licensed or created the fonts and we have permission to use those fonts.

If you are serving a font from your web server, you need permission to distribute it from the font designer.

You have three choices for getting the font to your readers:

  1. Choose a font that’s 99.999% guaranteed to be installed in the user’s device. Some common choices: Helvetica, Verdana, Times New Roman, and Palatino. Some of these might not be available in free operating systems like Linux. Depending on a pre‑installed font is risky. I do not recommend it.

  2. Use a free font and either serve it from your own server, or from someone else’s server. For example Google Fonts has a good selection of fonts designed for the web. You can either download them to your web server or link directly to google’s servers.[5]

  3. Buy a font from a design firm. You typically serve it from your own server, but they keep track of usage in order to charge you for distribution. Some good places are Hoeffler & Co, and fonts.com.

But perhaps the most important advise I can give you is this:

Choose a typeface that was designed for the size and use you are going to give it.

In the next installment I’ll talk about Inconsolata again and why I’m still using it almost 10 years after I first discovered it.

In the meantime, make your text beautiful and clear.

-ob

1. Courtesy of Wikipedia.
2. One exception might be if your audience consist primarily of children or illiterate adults. In that case you might be better off choosing a sans‑serif typeface to help your readers decode the letters. In almost any other case, you can choose what you want.
3. Example from Choosing a typeface for reading
4. This is the typeface used in this website.
5. Giving google information about your readers. I don’t recommend it.