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

When Is It Time to Leave Your Current (UX) Job?

Resign photo created by pressfoto - www.freepik.com I’ve been doing the job of lead for almost 3 years now. Like most companies, mine doesn’t really teach you anything about how to manage. So, I found and just finished this great book, The Successful Manager by James Potter and Mike Kavanagh.   While the book was really valuable from a management standpoint, to me the most impactful part of the book was Chapter 13: Determining If It Is Time to Leave . I wished I’d had access to this advice long ago when I first started working. My work journey would have been much different. So here’s the authors’ advice, ask yourself 5 questions about your current job: Do I enjoy the work itself? Do I like the people? Am I fairly/generously paid? Is it meeting my professional development needs? Do I have work-life balance? If you answer yes to 4 - 5 of these questions, then you’re in great shape.  If you only answer yes to 3 of these, then it’s time to start putting feelers out, i.e., you should be l

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

Mac vs. Windows: Should You Really Be Using a Mac for Design?

There's this thing about the design community, especially visual designers. They generally prefer to use a Mac for design work. I get it. The first time I saw my company's website on a Mac using Netscape, "Wow!"  I've always been a Windows girl, even for design work. I live in the Seattle area. What do you expect? But seriously, there's more to it than that. My first experience with Mac versus Windows was when I was working as an office administrator in a small business with an open office and no conference room environment. My boss, the owner of the business, met multiple times with a designer to create the logo for the company and I always overheard the meeting conversations. My boss kept telling the designer that when he sent over his mocks and she looked at them on her (Windows) computer, the colors were different than when the designer showed her his work (on his Mac). The designer was forced multiple times to look at her computer screen at the color bein