guidelines
Readable type and words.
Text people can read on a small screen: line length, text size, plain words and headings that say something. 11 guidelines.
| Guideline | Priority | WCAG 2.2 |
|---|---|---|
| Front-load the point: conclusion first, details after | Medium | - |
| Keep body text 45-75 characters per line | Medium | - |
| Write interface copy at a lower-secondary reading level | Medium | 3.1.5 |
| Action labels are verb plus object, never 'OK' or 'Submit' | Medium | - |
| Error copy is human: no raw codes, no blame | Medium | - |
| Headings describe their section's content, not the mood | Medium | 2.4.6 |
| Use tabular numerals for any column or ticking number | Low | - |
| Write dates and times unambiguously, with timezone for events | Low | - |
| Never truncate values users must act on | Medium | - |
| Reserve all-caps for short labels, and letter-space it | Low | - |
| Size text in rem so user font-size settings are respected | High | 1.4.4 |
Medium priority
Front-load the point: conclusion first, details after
Good practice, no WCAG criterion.
Do
Put the benefit or answer in the first sentence, and in the first two words of headings and links - users scan in an F-pattern and read about 20% of the words
Avoid
Open with three paragraphs of company history before saying what the product does
Medium priority
Keep body text 45-75 characters per line
Good practice, no WCAG criterion.
Do
Cap the text column at 65ch; in multi-column layouts, constrain the column, not the paragraph
Avoid
Let paragraphs run 140 characters across a wide screen - eyes lose the line on the return sweep and reading speed drops
Medium priority
Write interface copy at a lower-secondary reading level
WCAG 2.2 success criterion 3.1.5.
Do
Prefer short sentences, common words ('use', not 'utilize'), active voice and concrete nouns; expand every acronym on first use
Avoid
Write 'Leverage our synergistic platform to operationalize workflows' - jargon slows every reader and defeats non-native speakers
Medium priority
Action labels are verb plus object, never 'OK' or 'Submit'
Good practice, no WCAG criterion.
Do
Name the consequence on the button: 'Save changes', 'Delete 3 files', 'Send invoice' - the label alone should answer 'what happens if I click?'
Avoid
Pair 'Are you sure?' with OK/Cancel, forcing users to reconstruct which button does the damage
Medium priority
Error copy is human: no raw codes, no blame
Good practice, no WCAG criterion.
Do
Lead with what happened and the next step ('We could not reach the server - check your connection and retry'); keep codes at the end, in small print, for support
Avoid
Surface 'Error 0x80070057: The parameter is incorrect' as the entire message, or blame the user ('You entered an invalid value')
Medium priority
Headings describe their section's content, not the mood
WCAG 2.2 success criterion 2.4.6.
Do
Write headings a skimmer can navigate by: 'Refund policy', 'Set up SSO', 'What data we collect' - keywords first
Avoid
Write vibe headings like 'More information', 'Go further', 'The details' that reveal nothing when scanned or listed by a screen reader
Low priority
Use tabular numerals for any column or ticking number
Good practice, no WCAG criterion.
Do
Apply font-variant-numeric: tabular-nums to tables, prices, timers and dashboards so digits align vertically and totals do not jitter as values change
Avoid
Let proportional figures wobble a live counter's width every second and misalign the decimal column in a price table
Low priority
Write dates and times unambiguously, with timezone for events
Good practice, no WCAG criterion.
Do
Spell the month ('5 Jul 2026'), wrap it in <time datetime> for machines and state the timezone or localize for anything scheduled
Avoid
Print 03/04/05 - month-first, day-first or year-first depending on the reader - and announce a webinar time with no timezone
Medium priority
Never truncate values users must act on
Good practice, no WCAG criterion.
Do
Wrap long IDs, emails and URLs with overflow-wrap: anywhere, or middle-truncate keeping both ends plus a copy button; ellipsis is only for previews that link to the full view
Avoid
Ellipsis-truncate an API key or order ID in the only place it appears, making it impossible to read, compare or copy
Low priority
Reserve all-caps for short labels, and letter-space it
Good practice, no WCAG criterion.
Do
If you uppercase, keep it to 1-3 word labels (badges, table headers), add letter-spacing around 0.05em and uppercase via CSS so the source text keeps real casing
Avoid
Set whole paragraphs in caps - uniform word shapes cut reading speed, and it reads as shouting
High priority
Size text in rem so user font-size settings are respected
WCAG 2.2 success criterion 1.4.4.
Do
Set component text in rem against an untouched root; users who raise their browser's default font size - a common low-vision adaptation - then get larger text everywhere
Avoid
Hardcode px on body text or set html { font-size: 10px } - both override the reader's chosen default
On the Health Report
The report checks this: body text is 16 px or larger.
See how your website reads on a phone.
Run the free website health check on any site, then keep it easy to read with the Website Health Report each month.