How to design typography for older readers?

To design typography for older readers, you make text larger, darker and simpler than you might for a younger audience, and you make sure it can be enlarged further without breaking the page. In practice that means body text of around 18 pixels or more, strong contrast with no pale grey text, regular or medium weights rather than thin ones, clear typefaces with open letter shapes, a line height around 1.5 and comfortable line lengths. Links should be underlined, buttons should have clear text labels and generous touch targets, and decorative effects that reduce clarity should be left out. These choices also help everyone else, from people reading on a phone in sunlight to anyone who is simply tired.

Vision changes with age for almost everyone, and older adults are a large and growing share of people online, using websites for banking, health, shopping, travel and keeping in touch. Many sites are still designed by younger teams on large, high-quality screens, which hides how small, light and fiddly their text can be. In this article you'll learn how ageing affects reading, which typographic choices make the biggest difference, how to build them in CSS, how to handle links and interactive text, and how to test your pages with older users in mind.

How Ageing Changes Reading

Several common, age-related changes affect how people read on screen:

• Presbyopia: From around the age of 40, the eye's lens gradually loses its ability to focus on close objects. Small text becomes harder to read, and many people need reading glasses or varifocals, which have their own sweet spot for screen distance.
• Reduced contrast sensitivity: Distinguishing light grey from white, or dark grey from black, becomes harder. Low-contrast text that a younger designer reads easily may be invisible.
• Less light reaching the retina: Pupils tend to get smaller with age, so older eyes need more light and are more affected by dim screens.
• Yellowing of the lens: This can make blues and violets harder to distinguish and reduce the contrast of blue text on dark backgrounds.
• Increased glare sensitivity: Bright, high-glare screens and very bright white backgrounds can be uncomfortable.
• Eye conditions: Cataracts, glaucoma, macular degeneration and diabetic retinopathy become more common with age and affect clarity, contrast and parts of the visual field.

Many older readers also have reduced fine motor control or tremors, which makes small links and buttons hard to tap, and some find dense, complex layouts more tiring. Typography sits at the centre of all of these.

Use Larger Text

Size is the single biggest improvement. A base of 16 pixels is the common default for the web, but older audiences benefit from more:

html {
  font-size: 100%; /* keep the user's browser default as 1rem */
}

body {
  font-size: 1.125rem; /* 18px at the default setting */
  line-height: 1.55;
}

@media (min-width: 64em) {
  body {
    font-size: 1.25rem; /* 20px on large screens */
  }
}

.small-print,
figcaption {
  font-size: 1rem; /* never smaller than the browser default */
}

Notice that "small" text here is still 16 pixels. For an older audience, keep secondary text such as captions, dates and help text at or close to the browser default, rather than shrinking it to 12 or 13 pixels.

Set Sizes in rem So They Scale

Many older people raise the default font size in their browser or operating system, or rely on page zoom. Sizes in rem follow the browser's default font size setting, while fixed pixel sizes ignore it. Avoid setting the root font-size in pixels, which would override the user's preference for the whole page. There's more on this in what the minimum font size for accessibility is.

Make Contrast Strong

WCAG requires a contrast ratio of at least 4.5:1 for normal text at Level AA. For an older audience, aim for the AAA level of 7:1 or higher for body text, and be especially careful with secondary text:

:root {
  --bg: #ffffff;
  --text: #1a1a1a;        /* 17.4:1 on white */
  --text-secondary: #404040; /* 10.4:1 on white */
  --link: #0645ad;        /* 8.5:1 on white */
}

body {
  background-color: var(--bg);
  color: var(--text);
}

.meta,
.help-text {
  color: var(--text-secondary);
}

Things to avoid:

• Light grey text: Even greys that technically pass 4.5:1 can be hard for older eyes. Keep secondary text dark.
• Text over images or patterns: Busy backgrounds reduce effective contrast further.
• Colour-only distinctions: Blue and purple, or green and teal, can be hard to separate. Use labels, icons or underlines as well as colour.
• Very bright backgrounds with glare: A plain white page is fine, but avoid large areas of saturated or neon colour behind text.

Choose Clear, Sturdy Typefaces

Look for fonts that stay legible when slightly blurred, which is effectively how small text appears to many older readers:

• Large x-height: Lowercase letters look bigger at the same font size.
• Open apertures: Letters such as a, c, e and s are easier to tell apart.
• Distinct characters: Capital I, lowercase l and the digit 1 should differ, as should O and 0.
• Moderate stroke contrast: Very thin hairlines and fine serifs fade first.
• Familiar shapes: Avoid quirky, condensed, script or highly stylised fonts for anything people must read.

Good options include Verdana, Tahoma, Georgia, Atkinson Hyperlegible, Source Sans 3, Open Sans and Inter, as well as the system UI fonts on each platform. Serif fonts with sturdy serifs, such as Georgia or Source Serif 4, work well for long articles on modern screens.

Use Regular to Medium Weights

Light and thin weights (300 and below) are a common problem for older readers. Use 400 as the minimum for body text, and consider a slightly heavier weight, such as 450 to 500 with a variable font, for small text and interface labels:

body {
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
}

.button,
.nav-link,
label {
  font-weight: 500;
}

Space Text Comfortably

Generous spacing makes it easier to keep your place and to move from one line to the next:

• Line height: Around 1.5 for body text. Lines that are too tight make it easy to skip or re-read a line.
• Line length: Around 50 to 75 characters. Very long lines are hard to track, but very short lines create too many line breaks.
• Paragraph spacing: Clear space between paragraphs rather than indentation.
• Left alignment: Justified text creates uneven word gaps, which are more distracting at large sizes.
• Short paragraphs and clear headings: Break content into manageable chunks with descriptive headings.

.article {
  max-width: 65ch;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.article p {
  margin-block: 0 1.25em;
}

.article h2 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin-block: 2em 0.5em;
}

Make Links and Interactive Text Obvious

Many problems older users have with websites are about finding and operating controls, and typography plays a large part.

Underline Links

Don't rely on colour alone to show links. Underlines are universally recognised:

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:visited {
  color: #5a3696;
}

a:focus-visible {
  outline: 3px solid #0645ad;
  outline-offset: 3px;
}

A clearly different visited colour helps people remember where they've been, and a strong focus style helps anyone navigating with a keyboard.

Label Buttons With Words

Icon-only buttons are a frequent source of confusion. A short text label, such as "Search" or "Menu", next to the icon removes the guesswork. Avoid vague link text like "Click here", and keep button text in sentence case rather than capitals.

Make Targets Large

WCAG 2.2 introduced criterion 2.5.8 Target Size (Minimum), which asks for targets of at least 24 by 24 CSS pixels, with some exceptions. For older users, larger is better, and 44 by 44 pixels is a widely used target for primary controls:

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem; /* 44px at the default setting */
  min-width: 2.75rem;
  padding: 0.625rem 1.25rem;
  font-size: 1.125rem;
}

.nav-link {
  display: inline-block;
  padding-block: 0.75rem;
}

Leave enough space between adjacent links and buttons that a slightly off-target tap doesn't hit the wrong one.

Avoid Effects That Reduce Clarity

Some popular styling choices are particularly unhelpful for older readers:

• Thin, light, low-contrast "minimal" text: Often used in hero sections and footers.
• Text over video or carousels: Moving backgrounds and auto-advancing slides give people too little time to read.
• Long passages in italics or capitals: Both reduce letter clarity.
• Placeholder text instead of labels: Placeholder text is usually pale and disappears when you start typing. Use visible labels above form fields.
• Tiny legal and cookie banner text: Important information should be readable.
• Animated or parallax text: Respect prefers-reduced-motion and keep text still.

Test With Older Readers in Mind

Designers rarely experience their own work the way older readers do, so build specific checks into your process:

1. Increase the browser's default font size: Set it to "Large" or "Very large" and check that text grows and layouts don't break.
2. Zoom to 200%: Make sure nothing is cut off and you don't need to scroll sideways to read paragraphs.
3. Check every text colour against WCAG: Aim for at least 7:1 for body text.
4. Use a lower-quality screen: Try an older laptop, a budget phone, or reduced screen brightness.
5. Blur your view: Step back from the screen or use a blur filter in developer tools to approximate reduced focus. Text that stays recognisable is robust.
6. Watch real people use it: Nothing replaces testing with older users. Ask them to complete real tasks, such as finding opening times or filling in a form, and watch where they hesitate.

/* A quick, temporary blur test applied in developer tools */
html {
  filter: blur(1px);
}

This doesn't simulate any particular eye condition, but it quickly shows which text depends on fine detail to be readable.

---

FAQ: Typography for Older Readers

---

Conclusion

Ageing eyes need more from typography: larger text, stronger contrast, sturdier letterforms and more space. Presbyopia, reduced contrast sensitivity, glare sensitivity and common eye conditions all make small, pale, thin text harder to read, so the best typography for older readers uses body text of around 18 pixels or more, dark text with contrast of 7:1 or higher, weights of 400 and above, clear typefaces and comfortable spacing.

Treat interactive text with the same care, with underlined links, labelled buttons and generous targets, and make sure everything scales when people enlarge text or zoom. Test with larger browser defaults, lower-quality screens and, wherever possible, real older users. The result is a site that works better for older readers and is noticeably easier to use for everyone else too.