When you do a lot of usability testing, you’ll hear a lot of the same common usability problems. Some of these seem easy to ignore, especially if they do not seem to be glaring errors that impede customers’ ability to complete tasks.
For Part I of this series on common usability problems, I’m going to talk about an issue that comes up a lot in testing – and that is “the font is too small.”
Yeah, yeah, you think. Well if I increase the font size, the whole design will blow up. Plus, this cool light gray font looks very stylish at 11px. Any bigger, and it’s going to really showcase the fact that we’ve written too much copy for the web. Our pages will get too long and who will want to read all that? Besides, we’ve got a LOT of information to fit on this page.
That’s right, I said what you were thinking. Out loud. But when you watch a user squinting at the screen or trying to increase the font size with the browser (to disastrous results), it should make you sweat a little bit.
Recent developments, such as responsive/adaptive design (where your fonts need to be readable on any device, from a large monitor to a small mobile device) have made concerns about font size an even bigger concern.
Fixed font sizes have long been a pet peeve of Jakob Nielsen, who identified font size as #5 on his list of the Top 10 Mistakes in Web Design. Smaller fonts make it harder for people to accomplish their tasks. And by “accomplish tasks” I mean convert online – to sales or leads; your choice.
The recipe for success? Make your font size bigger. So big in fact, that people on the design team look at it and say “That big? Really??” Yes. That big.
That being said, I’m not a Web developer, so it would not be helpful to anyone for me to explain how to code your fonts in the most technical and up-to-date ways. But here is a list of resources that you can use to get started:
- Smashing Magazine – “Typographic Design Patterns and Best Practices” – Tip #5 outlines the average font size for body copy in pixels (13-14px is more the standard today). The rest of the study is pretty fascinating, if you’re into that kind of thing.
- Creative Bloq – “How to Make Your Typography Responsive” – This article gives a more technical look at how to have your text scale as nicely in your images when doing a responsive design (a design that looks good on any sized device, from a big monitor, to a smartphone).
- Smashing Magazine – “The State of Responsive Web Design” – addresses technical topics with responsive Web design, including some information on a new CSS3 font unit that is handy for responsive typography: the rem unit.
- Sitepoint.com – “Responsive Web Design: Using Fonts Responsively” – includes a nice, easy-to-read summary of the different fonts size units: pixels, ems, percentages, and ems.
Through looking at this information, I’ve realized that I have the font set too low, in all likelihood, on this very site. I am going to be looking at changing that.
So what do you think? Do you have examples of sites with a too-small font or something you think looks great? And what resources do you use to help you decide what the best font size is?