Skip to main content

Font Sizes for Dense Applications

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

Popular posts from this blog

How UX Creates Business Value in the Enterprise

My company is a bottom-up UX company. We don’t have an upper UX manager, so we ourselves have to evangelize UX up to the top. In my group, I was the only UX designer for several years. And then there was two. As the lead I wanted to give our small but growing team some goals. As we talked, we realized that part of the problem we have is that we don’t know how to talk about ourselves to business in a language they understand. We wanted to create an elevator sales pitch for talking to executives. But really we hadn’t really ever listed out what UX can do for the business. I started by researching. We do know what we do from a business perspective, but how often do you sit down and really think about it or name it. I had most of them on my list, but have you ever thought part of your work limits company liability?  (Research is good.) So here is the statement that I came up with about how UX or good design creates business value as a starting place. Why good design? Because that is our…

Evaluating Your User's English-as-a-Second-Language Ability

At my company we've been dreaming of being able to localize our UIs since I started working there. While we have localized here and there for the most part it just doesn't happen. There simply aren't the resources or knowledge.Instead our employees in all branches are required to speak English. I have no idea how branches determine whether a person's ability is up to standard to be hired. I've never seen any guidelines for branch management to follow and admittedly our industry is one where you have to learn a lot of jargon, too. I imagine that may other global enterprises are the same way. This means that your users may struggle to understand your UI, especially those newly hired employees. So part of your user research should be pointed at determining at what level your users can understand written English. Here are guidelines you can use based on the European Framework of Reference for Languages. (See Chapter 9 for more information.) I assigned the reading leve…