Recently one of our UX designers floated the idea of going with a font size smaller than our standard because they needed the extra space. Being the avid researcher I am I went out and started hunting for information on best practice font size on the web or in applications. I mean it's been years. Someone must have done a study.
I came across someone else on Stackflow asking the same question, but none of the answers were anything supported. Just unsupported tribal knowledge.
To make a long story short I managed to find a great study, The Uncrowded Window of Object Recognition, done by Denis G Pellli and Katharine A. Tillman, 2008. It comes down to this. Letters in a word are an object and must be recognizable by the brain. As you reduce a font, you need to add a little space around the letters so they can be recognized. It really doesn't have anything to do with size.
Here's an example in the standard Verdana/Helvetica at 13 pixels:
"You saved my life," he replied; "from that moment it became my duty to protect and befriend you. I would have been no true Mezop had I evaded my plain duty; but it was a pleasure in this instance for I like you. I wish that you would come and live with me. You shall become a member of my tribe. Among us there is the best of hunting and fishing, and you shall have, to choose a mate from, the most beautiful girls of Pellucidar. Will you come?"
Now let's bring it down to 9 pixels:
"You saved my life," he replied; "from that moment it became my duty to protect and befriend you. I would have been no true Mezop had I evaded my plain duty; but it was a pleasure in this instance for I like you. I wish that you would come and live with me. You shall become a member of my tribe. Among us there is the best of hunting and fishing, and you shall have, to choose a mate from, the most beautiful girls of Pellucidar. Will you come?"
And 7 pixels:
"You saved my life," he replied; "from that moment it became my duty to protect and befriend you. I would have been no true Mezop had I evaded my plain duty; but it was a pleasure in this instance for I like you. I wish that you would come and live with me. You shall become a member of my tribe. Among us there is the best of hunting and fishing, and you shall have, to choose a mate from, the most beautiful girls of Pellucidar. Will you come?"
9 pixels is someone readable and for me 7 pixels is near unreadable without a lot of eye strain. If you had to look at either for long periods of time as employees spend in internal applications it would not be good for them to be able to do their job. But add in some kearning by using the CSS letter spacing property.
9 pixels with an addition 1 pixel spacing between letters:
"You saved my life," he replied; "from that moment it became my duty to protect and befriend you. I would have been no true Mezop had I evaded my plain duty; but it was a pleasure in this instance for I like you. I wish that you would come and live with me. You shall become a member of my tribe. Among us there is the best of hunting and fishing, and you shall have, to choose a mate from, the most beautiful girls of Pellucidar. Will you come?"
And 7 pixels with an additional 2 pixels between letters and the line-height set to 1.15 em:
"You saved my life," he replied; "from that moment it became my duty to protect and befriend you. I would have been no true Mezop had I evaded my plain duty; but it was a pleasure in this instance for I like you. I wish that you would come and live with me. You shall become a member of my tribe. Among us there is the best of hunting and fishing, and you shall have, to choose a mate from, the most beautiful girls of Pellucidar. Will you come?"
So the real answer to the question is that you can reduce the font as long as each letter is recognizable as an individual object. However, you do have to be careful about links or other font-decoration that would cause words to be joined so they look like a single object as a group.
"You saved my life," he replied; "from that moment it became my duty to protect and befriend you. I would have been no true Mezop had I evaded my plain duty; but it was a pleasure in this instance for I like you. I wish that you would come and live with me. You shall become a member of my tribe. Among us there is the best of hunting and fishing, and you shall have, to choose a mate from, the most beautiful girls of Pellucidar. Will you come?"
"I wish" starts to look like "lwish".
This is also important in spacing between form inputs and labels when stacked:
A Really Important Note
Recognizable is important here. If your users are older, you do have to be concerned with visual acuity. If your users are not likely to recognize an individual letter at a smaller font size, you should not be reducing your font. Eye strain should also be of concern if your application or page is one that your user will use continually. If you go smaller, make sure you're adding in the additional space. You can still get a tight layout with reducing the font slightly even with the added space for individual character recognition
Comments
Post a Comment