Typography Tips for Web Design: 7 Rules for Readable Text

These typography tips for web design come down to one idea: make text easy to read. Most of what people do on a website, they do by reading, so type is not decoration. It is the main way a site communicates.

Below are seven practical rules for web typography, from choosing fonts to line length and spacing, plus a quick glossary and a pre-launch checklist. Follow them and your pages will feel clearer, calmer and more professional.

Why web typography matters

When people think about web design, they picture images, shapes and colour. Text comes last. Yet almost all information on a typical site arrives as written words, and the way those words look decides how much effort it takes to read them. Good typography makes reading feel effortless. Poor typography makes visitors tired, and they leave without knowing why.

A few terms help when you talk about type:

• Typeface and font: a typeface is the design, such as Garamond. A font is one style of it, such as Garamond Bold at 18 pixels.
• Serif and sans serif: serifs have small strokes at the ends of letters. Sans serif fonts do not. Both work on screens when they are well made.
• Leading (line height): the space between lines of text.
• Tracking and kerning: the spacing across a group of letters, and between specific pairs.
• Measure: the length of a line of text.

7 typography tips for web design

1. Use one font family, or two at most

Most sites with bad type have too much of it. Stick to one family and vary weight and size to create contrast. If you want a second font, use it for headings and keep body text in the first. The two should differ clearly, or look like cousins. Anything between those extremes looks like a mistake. Our guides to font pairing and choosing the perfect font show how.

2. Choose a typeface that works on every device

A site has to work on small phones, laptops and large monitors. Pick a typeface that stays clear at small sizes, with open letter shapes and a generous x-height. Set body text at 16 pixels or larger, and test it on a real phone.

Web fonts also affect speed. Use the WOFF2 format, load only the weights you need, and set a fallback system font so text appears while the web font loads. Google Fonts Knowledge explains the basics of choosing and using type on the web.

3. Avoid all caps for long text

All caps is fine for a short label, a button or a logo. It is hard to read in sentences, because capital letters have similar shapes and the eye cannot recognise whole words quickly. If you use caps for small headings, add a little letter spacing to help. For anything longer than a line or two, use sentence case.

4. Do not rely on colour alone

The old advice was never to colour your text. A better rule is not to use colour as the only signal. According to Colour Blind Awareness, about 1 in 12 men and 1 in 200 women have a colour vision deficiency, and red and green are the most commonly confused. Make links underlined or bold as well as coloured, and mark errors with an icon and text, not just red.

Contrast matters just as much. WCAG asks for a contrast ratio of at least 4.5:1 for normal body text. Check your colours with the WebAIM contrast checker, and read our guide to colour schemes for picking a palette that passes.

5. Keep lines a readable length

Line length, or measure, has a big effect on reading. If lines are too long, the eye loses its place when it jumps to the next one. If they are too short, reading becomes choppy. A common target is 45 to 75 characters per line, including spaces. In CSS you can set max-width: 65ch on your text container. Smashing Magazine covers how line length and font size work together on responsive layouts.

6. Give lines room to breathe

The word leading comes from the strips of lead that printers put between lines of metal type. On screen, it is the line height. For body text, a line height of about 1.4 to 1.6 times the font size is comfortable. Longer lines need more of it, shorter ones less. Also leave clear space between paragraphs, so each block of text reads as a separate idea.

7. Never flash or blink text

Flashing content can trigger seizures in people with photosensitive epilepsy. WCAG says nothing on a page should flash more than three times in any one second. Beyond safety, blinking text is distracting and looks dated. If you animate text at all, keep it subtle, and respect the prefers-reduced-motion setting so people who turn animation off do not see it.

Putting the tips into CSS

Most of these rules can be set once in your stylesheet. A solid starting point looks like this:

• Set the base font size to 1rem (usually 16 pixels) and size everything else relative to it, so users who change their browser text size are respected.
• Use a simple type scale, for example each heading level about 1.25 times the one below it, so the steps look deliberate.
• Set line-height to around 1.5 on body text and tighten it slightly on large headings.
• Limit paragraphs with max-width: 65ch, and let the layout, not the text, fill wide screens.
• Load fonts with font-display: swap so visitors see text straight away.

Once these defaults are in place, every new page inherits them, which keeps the whole site consistent and saves you from fixing the same problems page by page.

A typography checklist before launch

• Body text is at least 16 pixels and passes a 4.5:1 contrast check.
• No more than two font families, with a clear difference between heading and body.
• Line length is roughly 45 to 75 characters on desktop, and line height is around 1.5.
• Headings follow a clear order of size and weight. See our post on visual hierarchy.
• Links look like links, and no meaning depends on colour alone.
• Web fonts load quickly, with a fallback font in place.

Typography is one part of the bigger picture. Browse our guide to web design principles, and see the minimalistic fonts and 15 beautiful fonts collections for ideas. If you want to follow current thinking, read our font trends for web design.

Frequently asked questions

What is web typography?

Web typography is the choice and arrangement of type on websites: typefaces, sizes, spacing, line length and colour. It also includes how fonts are loaded, since slow fonts hurt the experience.

What is the best font size for a website?

For body text, 16 pixels is the usual minimum, and many sites use 18 pixels for easier reading. Headings are larger, in a clear scale. Test on a real phone to be sure.

How many fonts should a website use?

One or two font families is plenty. Use different weights and sizes for variety instead of adding more typefaces.

What is a good line length for web text?

Aim for about 45 to 75 characters per line, with 60 to 70 often seen as the sweet spot for articles. Shorter lines suit sidebars and cards.

Should I use system fonts or web fonts?

Both are fine. System fonts load instantly and look native on each device. Web fonts give you more personality but cost loading time, so use a few weights and add a fallback. Choose based on how much the brand depends on its typeface.

---

Need a website designed for a client?

Inkyy is a white label design and development team for agencies. Our in-house designers handle typography, layout and brand details so the sites you deliver read well on every screen. See our design services or book a 15-minute call.