October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsSlow PC?RecommendedPC slow today? Run a repair scan before it gets worseResolve common Windows issues and optimize system performance.Scan NowOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
ThatPainter
Legibility

Typography: Readability and Legibility (Part 1)

Legibility is about distinguishing characters; readability is about following text. Learn how size, contrast and spacing shape web typography—and how to interpret WCAG criteria without treating them as one-size-fits-all design rules.

By ThatPainter Team 4 min read
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More

Legibility is how easily readers can distinguish individual characters; readability is how easily they can follow text as a whole. Neither depends on a typeface alone: size, contrast, spacing, line length, language, device and reader needs all shape the experience. For web text, WCAG offers useful accessibility thresholds, but those thresholds are not a universal recipe for the most comfortable typography.

Legibility and readability are related, but not identical

Legibility concerns the clarity of individual letters and other characters: can a reader tell one glyph from another at the size and weight actually shown? Readability concerns the experience of following a passage in its presentation, including how comfortably a reader can move through and understand it.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

This is a practical distinction, not a universally fixed technical boundary. The terms sometimes overlap, and it is more useful to evaluate both than to treat either as a property of a font in isolation.

What makes text easier to read?

Judge typography in its real context: the text at its rendered size, on its intended background, on the devices people use and in the language or writing system being presented. A typeface that distinguishes characters well at one size may be less clear at another. Readers also differ in preferences and accessibility needs, so there is no single best typeface for everyone.

  • Character distinction: Check whether similar-looking characters are easy to tell apart in the actual text and size.
  • Contrast: Evaluate the light-dark contrast between text and background. A difference in hue alone does not establish adequate contrast.
  • Size and weight: Make body text large enough for comfortable reading, and check that important distinctions remain clear without relying on color alone.
  • Line length and spacing: Consider whether readers can track lines and distinguish paragraphs. Avoid treating any one line length or spacing value as ideal for every layout.
  • Resizing and reflow: Check that readers can enlarge text and change spacing without content being clipped, obscured or made unusable.
  • Script and conditions: Account for the language, writing system, screen, viewing conditions and reader preferences.

Digital.gov advises using body text large enough for comfortable reading and a line length that supports comfortable reading, but does not establish one universal body-text size. Its visual-design guidance is at Accessibility for visual designers.

How much contrast should web text have?

For WCAG 2.2 Level AA, Success Criterion 1.4.3 sets a minimum contrast ratio of 4.5:1 for ordinary text and 3:1 for large-scale text, subject to the criterion’s exceptions. WCAG treats text as large-scale at 18 point or larger in regular weight, or 14 point or larger in bold; it also accounts for equivalent sizes in CJK fonts. These are conformance thresholds, not experimental findings that guarantee comfortable reading for every person.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The ratio measures the difference in lightness between foreground and background, rather than hue by itself. The W3C explains the requirement and its exceptions in Understanding SC 1.4.3: Contrast (Minimum), WCAG 2.2; the full standard is Web Content Accessibility Guidelines (WCAG) 2.2.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

What do WCAG’s spacing and line-length criteria mean?

WCAG contains criteria that help assess text presentation, but their values should be read in context—not mistaken for mandatory default settings for every design.

Text-spacing overrides: WCAG 2.2 SC 1.4.12

Success Criterion 1.4.12 checks that content remains usable when a reader applies specified text-spacing overrides. The test values are:

  • Line height of at least 1.5 times the font size.
  • Spacing after paragraphs of at least 2 times the font size.
  • Letter spacing of at least 0.12 times the font size.
  • Word spacing of at least 0.16 times the font size.

These are values for the override test, not a universal prescription to set every page to those defaults. See the W3C explanation of SC 1.4.12: Text Spacing.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Visual presentation: WCAG 2.1 SC 1.4.8

WCAG 2.1’s Success Criterion 1.4.8 describes visual-presentation options that include lines no longer than 80 characters or glyphs—or 40 for CJK scripts—line spacing of at least 1.5, and paragraph spacing at least 1.5 times the line spacing. These values belong to that criterion’s context; they are not a universal optimum or a requirement to impose identical dimensions as defaults on every page. The W3C’s explanation is Understanding SC 1.4.8: Visual Presentation, WCAG 2.1.

How to choose and check a text presentation

  1. Start with the reading context. Identify the language and script, the devices and backgrounds, and the readers’ likely resizing or spacing needs.
  2. Check character clarity at the displayed size. Look for characters that are hard to distinguish in the actual copy. Do not assume a serif or sans-serif typeface is inherently more readable.
  3. Measure contrast. Compare text and background against the applicable WCAG threshold, taking the large-text definition and exceptions into account.
  4. Test resizing and spacing changes. Apply the WCAG 2.2 SC 1.4.12 values and verify that text and controls remain usable rather than clipped or obscured.
  5. Review line length and paragraph structure. Use the WCAG 2.1 SC 1.4.8 values as a presentation reference where relevant, while checking the actual layout rather than assuming one line length suits every reader and screen.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

More from the Paint Desk

Recommended PC Tool
Recommended PC Tool
Crashes, No Sound, or Screen Glitches?Free driver scan
PC Slower Than It Used to Be?Free scan - under a minute

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.