My, what big “Tee’s” you have, or…why your type is too small.

You may have noticed that the font size on our new site is larger than you’ll typically see on most websites. That’s a deliberate choice on our part.

In 2012, approximately 3% or about 750,000 Canadians reported having some limitation in their sight. Beyond that, at age 40, only half the light gets through to the retina as it did at age 20. For 60-year-olds, it’s just 20%. Perhaps your customers are younger, and you feel you don’t have to worry about aging eyes? Consider that 75% of U.S. citizens wear some form of corrective lens, so what percentage of your customers need glasses for their smartphone, tablets, and monitors?

Chances are that your website’s purpose is to sell your product or service. So, each element of your website should be designed to achieve that goal, including the copy. Larger fonts are easier to read and, as a result, your site will offer a better return on your investment.

The default font size used by web browsers is 16px, which is what we’ve sized this paragraph of text too. How does this paragraph compare to those around it? Is it easier or harder for you to read in comparison?

It is easy to forget that people don’t devote their full attention to our products, nor do they use them in neutral, quiet environments. They are often distracted, stressed, or multitasking. Typographic designs that are legible even in suboptimal conditions can help users greatlyPage Laubheimer - Neilson Normal Group

A 2017 study from MIT showed that larger font sizes outperform smaller font sizes in “at-a-glance” reading that is typical of most of us when using our devices.

So what font size should I use?

Typecast has an article which has some great starting points and covers many of the gotchas when building mobile-friendly websites.

To capture the widest audience, our site has a starting body copy size of 36 pixels, which balances nicely on our (admittedly large) monitors. For mobile, we reduce the body copy font size to 24px to strike a balance between legibility and the amount of scrolling to view a complete page.

The best advice I’ve seen is, it depends, but we recommend starting larger than you think and stepping down slowly. Different fonts will have varying heights, so two fonts at 16px can have two completely different heights

So what font size should I use?

Further reading