The essential typography skills for web design are choosing and pairing typefaces, building a clear visual hierarchy, setting comfortable sizes and line lengths, managing spacing, and keeping text accessible. Typography matters because most of a website is text, so the way that text looks decides how easy the site is to read and how professional the business appears.
These skills apply whether you are a designer or a business owner briefing one. Knowing the basics helps you spot why a website feels hard to read, even when you cannot quite say what is wrong.
1. Choosing typefaces with purpose
Every typeface has a personality. A rounded sans-serif feels friendly, a sharp serif feels traditional or premium, and a geometric sans-serif feels modern. The right choice depends on how the business wants to be perceived.
A useful test is to ask whether the typeface would suit your business if it were painted on your van or shopfront. If it feels wrong there, it will feel wrong on your website too.
For websites, also check that a typeface:
- Includes the weights you need (regular, bold and ideally a semibold)
- Reads well at small sizes on a phone
- Loads efficiently, because every font file adds weight to the page
2. Pairing fonts
Most websites need at most two typefaces: a display face for headings and a body face for paragraphs. The display face carries personality, while the body face prioritises readability.
Good pairings contrast in character but share similar proportions. A characterful heading font paired with a clean, neutral body font is a reliable approach. Avoid pairing two typefaces that are almost the same, because the difference looks like a mistake rather than a choice.
3. Building a visual hierarchy
Visual hierarchy tells visitors what to read first. Typography creates hierarchy through size, weight, colour and spacing.
A clear hierarchy usually has:
- One main heading (H1) per page, the largest text on the screen, stating what the page is about
- Section headings (H2) that break the page into scannable chunks
- Sub-headings (H3) for detail within a section
- Body text at a comfortable reading size
The visual hierarchy should match the HTML heading structure. Search engines and screen readers rely on headings to understand a page, so a page that looks well organised should also be well organised in the code.
4. Size and scale
Body text on the web should be comfortable to read without zooming. Around 16 to 18 pixels is a common starting point for body copy, with headings scaled up from there using a consistent ratio. A consistent type scale makes a website feel deliberate, because sizes relate to each other instead of being chosen at random.
On phones, very large headings can push the important content below the first screen, so headings usually scale down on small screens while body text stays readable.
5. Line length and line height
Line length is the number of characters on a line. Lines that are too long make it hard for the eye to find the start of the next line, and lines that are too short break the reading rhythm. Around 50 to 75 characters per line is a widely used guideline for comfortable reading.
Line height (the space between lines) matters just as much. Body text usually needs a line height of roughly 1.5 to 1.7 times the font size, while large headings look better with tighter line height.
6. Spacing and alignment
Consistent spacing gives a page rhythm. Headings should sit closer to the paragraph they introduce than to the paragraph above, so visitors can see which text belongs together.
For body text, left alignment is almost always the most readable choice in English. Centred text works for short headings or single lines, but long centred paragraphs are tiring to read because every line starts in a different place.
7. Contrast and accessibility
Text needs enough contrast against its background to be read easily. The WCAG accessibility guidelines recommend a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text. Pale grey text on white fails this test surprisingly often.
Other accessibility habits include:
- Avoiding text inside images, because it cannot be read by screen readers or resized
- Using real text for buttons and links, with clear labels such as “Book a free consultation” instead of “Click here”
- Not relying on colour alone to show meaning, such as a red word for an error
8. Consistency across the brand
Typography is part of your brand identity. The same typefaces should appear on your website, signage, social media and printed materials. Consistent typography makes a business instantly recognisable, the same way a consistent colour palette does.
Putting it into practice
Good typography is invisible when it works: visitors simply find the website easy to read. Poor typography is noticed immediately, even if visitors cannot explain why the website feels off.
If your website is hard to read, a website audit will pick up typography, contrast and layout issues alongside speed and SEO. When we build a new site through our website design and development service, typography is chosen to match your brand and tested on real phones. For more on simple, readable layouts, read why minimalism dominates modern web design.
