Building long-form content on the web: Font size and reading distance
We have many ways of reading content and they will all be different.
So how to best optimize font size for reading long-form content online?
For this exercise we'll define three sizes for the content:
- small: to be read at a close distance
- medium: our default size to be read while sitting on your desk
- large: to be read farther away than medium or on larger screens
For the sake of experimentation I've chosen the following sizes
- small: 12 points
- medium: 16 points
- large: 24 points
The idea is that the farther away we are reading from the larger we make the body font size to account for the distance. It is different to read on a tablet while in bed than it is reading from your laptop screen or a larger computer monitor.
Points are slightly larger than pixels when used for screen measurements:
- 1 pixel (px) is usually measured as 1/96th of an inch
- 1 point (pt) is measured as 1/72nd of an inch.
Therefore 16px = 12pt.
The first iteration of these settings is static. They are radio buttons that will change the values.
In a future iteration, I would look at turning it into a slider to give the user more control over the font sizes available.