Design System Accessibility: Typography & Size
If you can’t see it, you can’t use it.
--
Presbyopia¹ is a physiological condition which makes it harder to focus on close objects. This is a side-effect of your eyes ageing and currently effects about a quarter of the worlds population¹.
According to some sources everyones eyesight worsens after the age of 4⁰². This is why it is important for us to design experiences that are accessible for people with farsightedness³. They are a huge part of nearly everybody’s audience.
There are three main aspects to designing for farsightedness. Readability, allowing users to zoom and the size of interactive elements.
Readability & typography
Font size
There is no official minimum size for text⁴. This is probably at least in part due to typefaces having a different size appearance depending on their design.
However it is generally agreed that 16px or more is a good size for body copy⁵.
It is also recommended to never use any font-size smaller than 12px⁶ as your text may be illegible.
Desktop vs. mobile
When choosing a font size, the viewing distance is much more important the viewport size⁷. A mobile phone is normally held at arms length. This creates a viewing distance similar to a desktop screens. As a result, even though the screen is much smaller, your mobile body font-size should be the same or than for normal desktop. The larger the desktop screens the great the typical viewing distance. So you should increase your font size with the viewport as well⁸.
However, headlines must be treated different. On a small screen you need to reduce your headline sizes so that they don’t run on more than two or maximum three lines.
Point vs. Pixel
A common point of confusion is that sizes are often recommend in pt (point). Many people transfer those 1:1 into px (pixel). But this is wrong.
As describe on Penn State’s accessibility website, a px measures 1/96th of one inch, while a pt measures only 1/72nd of an inch⁶.
This means that 12pt equal 16px.
So be careful to check if measurements are made in point or pixel.
