The majority of websites are still anywhere in the range of 15–18px . We’re starting to see some sites adopt larger body text at around 20px or even greater on smaller desktop displays, but not enough in my opinion.*
*I’ll be referring to font sizes in px (pixels) instead of pt (point) throughout this article so it’s easily relatable to the framework of the web and digital space.
Now, I’m not saying that small typography is bad. An 18px font is perfectly legible from the right distance. Smaller type is extremely useful in certain situations like on captions, cards and other UI elements, but there’s good reason to increase it a few more notches for body text.
A Little History
Through the typewriter era we ascertained that 12pt was about the optimum size for legibility in print despite the fact that books, magazines and newspapers go smaller to reduce paper quantity costs.
The point unit originates from the 1600s and referred to the height of the metal body on which characters were cast. In the digital space of today however, point is pretty complicated and doesn’t translate reliably.
In the 1990s, digital platforms established a conversion from point to pixels, but of course we had low-resolution 14-inch screens to contend with. Apple’s Mac OS went for a straight conversion—12pt equaled 12px at 72 ppi . Microsoft however, determined that 12pt equaled 16px at 96 ppi, which is how IE assumed a default base size of 16px .
Throughout the late 1990s and early 2000s, websites had body text anywhere between 9–14px . For a while, designers thought 16px was too large because they were used to the 12pt ( 12px ) default on their Macs.
Flash forward to 2007 and believe it or not, 16px was still considered huge for body text, but by 2011 the mainstream influx of responsive development and larger resolution displays caused designers to consider 16px as a minimum , and we’ve been toiling close to that mark ever since.