Typography

Typography is more than picking a font. The same typeface can be easy or hard to read depending on its size, the space between lines and how long each line runs. On websites, where most of the content is text, these settings decide whether people read or leave.

Two terms get mixed up. A typeface is the design of a family of letters; a font is one specific style of it, such as the bold or the italic. You might license one typeface and use four of its fonts. Licences matter, because many typefaces are not free for web use.

How it works

Designers usually pick one or two typefaces, one for headings and one for body text, or a single family used in different weights. They then set a type scale, a fixed set of sizes so headings step down clearly and support the visual hierarchy. Browsers default to 16 pixels for body text, a sensible minimum on most sites, and a line height of around 1.5 times the text size with lines of roughly 45 to 75 characters are common guides for comfortable reading.

On the web, fonts are files the browser downloads, which affects page speed. Loading only the weights you use, hosting the files efficiently and setting fallback fonts keeps text visible while custom fonts arrive.

Readability also depends on details people rarely notice: the space between paragraphs, whether headings are clearly distinct from body text, and alignment. Left-aligned text is easier to read in long passages than justified text, which creates uneven gaps between words on narrow screens. A practical self-check is to read one of your own pages on a phone at arm's length in daylight. If you find yourself zooming in or losing your place between lines, the settings need adjusting.

Example

An accountant's site uses a thin, light grey typeface at 13 pixels, set in lines that run the full width of a wide monitor, and clients say it is hard to read. The redesign keeps the brand typeface for headings, switches body text to a sturdy, highly legible family at 18 pixels, limits lines to about 70 characters and darkens the text. The articles look calmer and are easier to read to the end.

The change has an edge case. The brand's heading typeface lacks some letters the accountant's clients have in their names, such as ë and ç, so those letters appear in a fallback font that looks different from the rest of the word. The designer checks the full character set before choosing typefaces and picks families that support every language on the site. Font files are limited to the three weights in use, so the switch does not slow the pages.

Why it matters for your business

Most of what a website says is said in text, so typography directly affects whether customers read your offer, trust it and act. Good typography also signals quality in a way visitors notice without naming. It need not be expensive: well-made free typefaces exist, and the settings matter more than the choice of family. The risk is novelty, since an unusual display face may look distinctive in a logo and still be tiring in paragraphs.

Common mistakes

• Using too many typefaces, which makes pages look disorganised.
• Setting body text small and light grey, which fails colour contrast checks and tires readers.
• Letting lines of text run across the full width of a large screen.
• Loading every weight of a web font when the design uses only two, which slows the page.

Questions people ask

What is the difference between a typeface and a font?

A typeface is the overall design of a set of letters, such as a named family. A font is one specific version of it, for example the bold weight or the italic style. In everyday speech the words are used interchangeably, but the difference matters when buying licences, which may cover particular fonts or uses.

What font size should body text be on a website?

Around 16 pixels is a sensible minimum for body text, and it is the default in most browsers. Many sites use 17 to 20 pixels for long reading. The right size depends on the typeface, since some look smaller than others at the same setting, so judge by reading on a real phone rather than by the number alone.

Are Google Fonts free to use on a business website?

The typefaces in the Google Fonts library are published under open licences that allow commercial use, including on business websites. In the EU, loading them directly from Google's servers has raised privacy concerns because visitors' IP addresses are sent to Google, so many sites download the files and host them themselves.