Six Years Later And Some Websites Are Still Using 12px Font Size

I try not to interweave my day to day life into this blog but today is an exception to the rule. Recently, my optician informed me I needed a stronger prescription; in fact, I needed to begin using progressive lenses. Consequently, I’m acutely aware of how much worse my eyesight is now compared to, say, six years ago when I published the first article about the need for arts organizations to begin using larger font sizes.

The good news is it has been some time since I ran across anyone using headache inducing tiny font sizes, but that stretch was broken this weekend after coming across a site still using 12px font size for all standard body copy.

There’s no need pointing out who, but this is a good reminder to look at your own websites. Whether you have someone in-house or a third-party provider, ask them to do an audit of your standard body copy and identify anything under 16px for web safe fonts (Arial, Helvetica, Verdana, Courier, Times New Roman, Georgia, etc.).

For most font families, 16px is a good minimum font size for standard body copy. There are always a few outliers and if you use a proprietary font family or anything from open source resources, like Google Fonts, you may need to tweak the size a bit.

If you’re still unsure about how much of a difference font size makes, here’s an example, starting off with the font size and family from the site I came across last weekend:

Text at 12px Arial:

For text-heavy pages, larger font sizes work best. If folks are reading for long periods of time, be thoughtful and don’t make them strain their eyes. Now, each font is different, even at the same size, but we’re talking:

• 16px: absolute minimum for text-heavy pages.
• 18px: a better font size to start with. Remember, your site visitors are engaging your content a few feet from their monitors or only a foot or less on mobile devices.
• 20px and larger: may feel awkwardly large at first but is tends to work great, especially for serif fonts. The best-looking text-heavy site on the web, Medium, has a default article text size of 21px using the web safe Georgia font family.

Here It Is Again at 16px Arial:

For text-heavy pages, larger font sizes work best. If folks are reading for long periods of time, be thoughtful and don’t make them strain their eyes. Now, each font is different, even at the same size, but we’re talking:

• 16px: absolute minimum for text-heavy pages.
• 18px: a better font size to start with. Remember, your site visitors are engaging your content a few feet from their monitors or only a foot or less on mobile devices.
• 20px and larger: may feel awkwardly large at first but is tends to work great, especially for serif fonts. The best-looking text-heavy site on the web, Medium, has a default article text size of 21px using the web safe Georgia font family.

Once Again, With Feeling, At 21px Arial:

For text-heavy pages, larger font sizes work best. If folks are reading for long periods of time, be thoughtful and don’t make them strain their eyes. Now, each font is different, even at the same size, but we’re talking:

• 16px: absolute minimum for text-heavy pages.
• 18px: a better font size to start with. Remember, your site visitors are engaging your content a few feet from their monitors or only a foot or less on mobile devices.
• 20px and larger: may feel awkwardly large at first but is tends to work great, especially for serif fonts. The best-looking text-heavy site on the web, Medium, has a default article text size of 21px using the web safe Georgia font family.

Pretty obvious when looking at them side by side, no?