Typography for UI: Readability Before Style
Typography for interfaces puts readability first: size, line length, line height and contrast. What WCAG 1.4.8, 1.4.12 and 1.4.3 ask for and how to apply it.
Why start with readability?
Because in an interface, text is not contemplated: it is used. A person scans a button, reads an error message under pressure, or compares two prices on a phone while walking. A beautiful typeface that forces a second reading does not work. Typographic decisions are, above all, decisions about cognitive load.
That does not mean style does not matter. It means the order matters: first that it can be read, then that it looks good. The W3C accessibility criteria help set that floor.
What do WCAG 1.4.8 and 1.4.12 say?
Two criteria are worth separating, because the first is more demanding and sits at a different level.
1.4.8 Visual Presentation (AAA). It asks that users can control colors, line width, alignment, and spacing, and it sets concrete references: width should not exceed 80 characters (40 for CJK text), text must not be justified, line spacing within paragraphs should be at least one and a half, and space between paragraphs at least 1.5 times the line spacing. It also asks that users can choose text and background colors and enlarge text up to 200% without horizontal scrolling. The criterion requires that a mechanism exist to achieve this; it does not force the author to impose that style (W3C: Understanding SC 1.4.8).
1.4.12 Text Spacing (AA). It asks that content keeps working when a person changes spacing with their own stylesheet: line height of at least 1.5 times the font size, spacing after paragraphs of 2 times the font size, letter spacing of 0.12 and word spacing of 0.16 times that size. The W3C clarifies that content is not required to use these values: they are a baseline the content must withstand without losing information or functionality (W3C: Understanding SC 1.4.12).
In practice: 1.4.12 is the minimum your design must withstand; 1.4.8 is a control ideal for the user that, in a product targeting AA, you do not have to meet strictly.
How many characters per line?
Smashing Magazine, in a 2014 article by Laura Franz, gives a range of 45 to 75 characters per line for print, widened to 45 to 85 for the web, and considers 65 the ideal measure. It quotes James Craig on the fatigue caused by long lines. This is a rule of thumb from an opinion piece, not a controlled study, so use it as a starting point (Smashing Magazine: Size matters).
WCAG’s 80-character figure is a ceiling, not a target. If a line goes beyond it, reading becomes heavy. If it is too short, the eye jumps lines often. In an interface, you solve this by limiting the width of the text container, not only by changing the font size.
What size and line height?
The same Smashing Magazine article suggests about 150% of the font size as a reference line height, and warns that smaller text needs more line height, not less. It does not set a universal minimum body size; its examples, meant for a laptop, use 16 px Georgia (article text) and 13 px Verdana (sidebar).
The rule that helps most in practice: when text gets larger or the column gets wider, line height should grow as well. A large heading can have tighter spacing because it is short; a five-line paragraph cannot.
On small screens, Smashing would rather give up the ideal line length than shrink the font: in its example, keeping the ideal measure forces 12 px Verdana and 14 px Georgia, which it finds harder to read than 13 px and 17 px with a less ideal measure. On large screens, it proposes keeping a modest size and narrowing the column instead of enlarging the text.
How do you build hierarchy?
Typography is the main tool for hierarchy in an interface. A heading, a subheading, body text, and a label should be distinguished by size, weight, and color, not by decoration. If everything has the same weight, nothing stands out. If everything is bold, bold stops meaning anything.
To keep hierarchy working, use few levels. As a design rule of thumb (not a WCAG requirement), three or four text sizes and two weights are usually enough. More scales usually mean every team added its own.
Color counts too: WCAG 1.4.3 (level AA) asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, which the criterion defines as 18 point or larger, or 14 point bold (W3C: Understanding SC 1.4.3).
Illustrative example
Illustrative example: a personal finance app shows the balance in a card 320 pixels wide, with titles at 22 px, labels at 12 px in gray, and transactions at 14 px. The gray labels fall short of the 4.5:1 ratio and are hard to read outdoors. The team raises the labels to 13 px with a darker gray, keeps transactions at 15 px, and limits description text to 60 characters per line. Then it tests spacing with a stylesheet that applies the 1.4.12 values and confirms that no text gets cut off. The design did not change its style; it changed how it reads.
For the colors in that hierarchy, see color in interfaces. And if the hierarchy is not clear at first glance, review visual hierarchy and cognitive load.
Common mistakes
- Choosing a typeface for its style before testing it with real interface text.
- Justifying text, which creates uneven gaps between words.
- Leaving lines longer than 100 characters on wide screens.
- Using light gray text for labels and assuming everyone reads it well.
- Shrinking the font on mobile only to keep the ideal line length.
- Creating too many sizes and weights, so hierarchy turns into noise.
What you can do tomorrow
- Open your main screen and measure the width in characters of each paragraph. If any exceeds 80, narrow the container.
- Apply a line height of 1.5 to a block of text and check whether anything gets cut off when spacing changes.
- Count how many sizes and weights you use. If there are more than four sizes, decide which ones to remove.