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

Stop Using Sketch for UI Design & Learn Basic HTML, CSS and JQuery

Lately I've been loaned out to another group at my company, but not just to another group. I'm having to work with a third-party consultancy helping with a consumer facing application. They had already been working on the project for over a year when I came on board. Because the consultancy's design group was lead by visual designers and they didn't ask our EUX group about our process and tools, I've been forced into using Sketch and all of its accouterments. Sketch is THE most miserable software I have ever used for enterprise UI design, followed by Abstract the version control I was forced into. I happen to be heavy-fingered on the mouse. Because of it, layers unknowingly move around on me constantly. Even when I'm aware, it can happen and I'm trying hard not let it happen. I screwed things up in a master library file royally. But I wasn't alone. 3 of the other 4 designers have done the same. Sketch is probably quite fine for small consumer produc

Doing User Research When You Have No Access to Your Users

For the 12+ years that I have worked at my company I have had extremely limited access to users. I’ve only made 3 branch visits over that time and what little access I have had, has been reserved for usability testing the applications I was working on. And, when branch visits are set up UX is usually the last person considered as a candidate to go. But when you are starting a project you need to know who you are designing for. What do you do? Covert user research! Believe it or not there are a lot of ways for you to find out about people without talking to them directly. Find User Representatives User representatives are people who are not the user, but may have been the user at some point in their career. Sometimes your business representatives can be user representatives if they did the job. I would give a word of caution here. While your business representative may have worked “in operations”, they are also heavily invested in the business goals of the company. So, you rea

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