Choosing fonts for a small business website

For a small business website, choose at most two fonts: one with a bit of character for headings and one plain, very readable font for everything else. Set the main text large enough to read on a phone without zooming, give the lines room, and keep fancy lettering for your logo. A customer should never notice your fonts; they should just find it easy to read your prices, your hours and your phone number.

Why fonts matter more than they seem

Fonts are the first thing that makes a site look either modern or dated, and the main thing that makes it either easy or tiring to read. Many small-business customers are reading on a phone, in a hurry, sometimes without their glasses. A thin, small, low-contrast font loses those readers before they reach your phone number.

The good news: fonts are one of the cheapest parts of a website to get right. There are excellent, readable fonts available at no cost, and the rules are simple.

The two-font rule

Use one font for headings and one for body text, or a single font family used in two weights (regular for text, bold for headings). More than two looks messy and slows the page.

The heading font can carry personality. A sturdy, slightly condensed font for a contractor; a warm, rounded one for a bakery; a classic serif (the kind with small strokes at the ends of letters, like the font in most newspapers) for a law office or an inn. Headings are short, so a font with character is fine as long as it stays clear.

The body font has one job: be easy to read in long stretches at small sizes. Plain, open letter shapes, clear differences between similar letters, and generous spacing. Most good body fonts are unremarkable on purpose.

Pairing the two

Simple pairings that tend to work:

A serif for headings with a clean sans-serif (no little end strokes) for body text.
A bold sans-serif for headings with a lighter, more open sans-serif for body text.
One sans-serif family throughout, using bold for headings.

Avoid pairing two fonts that are almost the same but not quite; it looks like a mistake.

Sizes that work on phones

Text size is where most small business sites go wrong. Some practical numbers your designer will recognize:

Body text: at least 16 pixels on phones. For a site whose customers are mostly older, 17 or 18 pixels reads more comfortably.
Line spacing: about one and a half times the text size. Cramped lines are hard to follow.
Line length: not too wide on a computer. Very long lines across a big monitor make it hard to find the start of the next one. A comfortable column is roughly the width of a paperback page.
Headings clearly bigger than the text, with each level of heading a step smaller than the one above.
Phone numbers, prices and hours at least as large as body text, and preferably bolder.

Your site should also cope when a customer turns up the text size in their phone or browser settings. Many older readers have it turned up. Nothing should overlap or get cut off. Redesigning a website for older customers covers this in more depth.

Fonts to avoid for body text

Script and handwriting fonts. Lovely on a wedding invitation, hard to read in a paragraph, and nearly impossible on a phone.
Very thin or light weights. They disappear on phone screens and in sunlight.
All capital letters for anything longer than a short label. Capitals are harder to read in a block.
Light gray text on white. It may look elegant on a large monitor; on a phone it fades. Body text should be near-black.
Novelty fonts, like stencil, typewriter or "grunge" styles, except perhaps in a single heading.
Fonts where 1, l and I, or 0 and O, look alike. Phone numbers and addresses need to be unmistakable.

What about the font in your logo?

Your logo's lettering is part of your logo, and it should stay there. Many logos use a custom or decorative font that does not work as text on a website. Show the logo itself as an image, and choose website fonts that sit comfortably next to it, perhaps one that shares its general feel (rounded, sturdy, classic). Using your logo well on a new website covers placing the logo itself.

Where website fonts come from

Web fonts are fonts the website loads as it opens, so every visitor sees the same thing. Google Fonts is the best known free library, and most builders and designers use it or something like it.

System fonts are the ones already built into phones and computers. They load instantly and read well, though they look slightly different on an iPhone and an Android phone.

Fonts installed on your computer are not automatically allowed on a website. A font you bought for print, or one that came with design software, may have a license that does not cover web use. If you want to use one, check its license or ask whoever sold it.

Each font, and each weight of it (regular, bold, italic), is a separate file the site has to download. Keep it to a handful. Two fonts in two weights each is plenty, and keeps pages quick.

How to test fonts before you commit

Look at a draft of your actual home page and one inner page, not a sample paragraph.
Read it on your phone, indoors and outside in daylight.
Hand it to someone over sixty and ask them to read your prices and phone number aloud.
Turn up the text size in your phone's settings and check nothing breaks.
Look at it on a computer and check the lines are not uncomfortably long.

Fonts and colors work together: dark, readable text on a light background is the foundation of both. Choosing a color scheme covers the color side.

What to do this week

Look at your current site on your phone and note anything you have to zoom to read.
Pick one heading font and one body font, or one family in two weights.
Ask for body text of at least 16 pixels on phones, more if your customers are older.
Make sure phone numbers and hours are large and bold.
Do the arm's-length test outdoors on a draft.

If your current site is hard to read on a phone, you can see your site rebuilt first with readable type, using the words already on it, and check it at arm's length yourself.