Oliver Schöndorfer’s masterclass for the Interaction Design Foundation made one thing clear from the start: accessible typography is not a separate concern from good typography. It is the same thing. After watching it, I came away with a few practical changes I want to apply to my own site at andrewbackhouse.design.
The transcript opens with a useful correction. When most designers hear “accessibility”, they think of screen readers and pass the work to a developer. But 1.1 billion people worldwide live with some form of visual impairment, and only 44 million of those are fully blind. That leaves over a billion people who can still see but may struggle with low contrast, small type, or poor letter distinction. That is a typography problem, and it is squarely in my territory as a designer.
Font choice: legibility comes from detail, not category
One of the more useful myth-busters in the session is the idea that sans-serif fonts are automatically more accessible than serif ones. Oliver shows that what actually matters is how distinct the letterforms are from each other, and how open the apertures are – the gaps in letters like C, e and S.
Arial, which the European Blind Union recommends by name, performs poorly on both counts. Atkinson Hyperlegible, designed specifically for low-vision readers, outperforms it because the letterforms are deliberately different from each other. Even some serif fonts beat Arial for legibility.
For my own site, I use FoundryUnie – DemiBold for headings and Regular for body text. It is not a purpose-built accessibility font, but the key test is whether I, l, 1 and similar characters are distinct, and whether apertures stay open at small sizes. I should run that check properly, particularly at the body text size I use on mobile.
Contrast ratios need proper checking
Oliver walks through WCAG 2.2 contrast requirements clearly. The minimum for body text is 4.5:1 against the background. For fluent reading, 7:1 is the target. For large text – defined as 24px or above – the minimum drops to 3:1.
My colour palette uses near-black #0D0D0D on white, which gives a very high contrast ratio and comfortably clears 7:1. The editorial red #D71920 I use for accents is worth checking carefully, especially if I ever set body text in it, as red is one of the harder colours to get right.
Font size and relative units
The recommendation is a minimum of 1rem (16px) for body text, using relative CSS units so users can scale text in their browser settings. Going below 12px for any functional text is described as something to avoid.
I already use clamp() for fluid type scaling on my site, which handles the responsive side well. But I should double-check my smallest text sizes – things like captions, footnotes and navigation labels – to make sure nothing dips below that 12px lower limit. Using rem rather than px throughout means the scaling system respects user preferences automatically.
Line length, line height and spacing
Oliver recommends 60 to 80 characters per line for comfortable reading. I already apply a max-width of 38em to body text columns on my site, which sits right in that range. That is a quick win I already have in place.
For line height, 1.4 to 1.5 works well for most body text. He also makes the point that line height should be reduced slightly on narrower columns, because the visual distance between lines feels greater when lines are short. My CSS already links line height responsively through the clamp() system, so this should be covered – but it is worth a visual check across breakpoints.
One thing the session clarified is that the WCAG spacing requirements (line height at least 1.5 times font size, letter spacing at 0.12 times, word spacing at 0.16 times) are not design mandates. They are requirements for what users must be able to override without losing content or functionality. The design does not have to apply those values by default – it just has to hold together when a user applies them via browser or assistive technology.
The practical takeaway
The biggest shift in how I think about this after watching the session is that accessible typography mostly comes down to four things: font choice, contrast, size and spacing. Get those right and you include far more people without making any sacrifice to the design. In fact, the constraints tend to push the design towards something more considered.
For my site, the next steps are a legibility check on FoundryUnie at small sizes, a contrast audit of every text colour in the palette – especially red – and a check that no functional text drops below 12px on any device. None of that should require significant rework. It is mostly about verification and small adjustments.
