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

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 really don…

Don't Fall in Love with Your Product

I don’t know what your calendar is like, but at my company at the beginning of the year business and upper level IT managers will prioritize their needs and I’m assigned to different projects depending on priority. Sometimes at this time of the year the air feels electric. It's almost like going on a first date. Will the project be exciting? Will it match my skills? It may sound silly to compare working on a new project to a first date. But, it's far more relevant than you might guess. While we want our users to fall in love with our products, it's wrong for us as technologists to fall in love with them. If we do, we lose the objectivity we need to keep our biases out of our work and we lose the ability to clearly see and measure the results of our work. Psychology of Attraction First, let's learn a little about how falling in love works. There are three stages: Craving or lust - is used to filter all our options into a group of what we desire in some way. Attraction …

Stop Using the Word Delight in Enterprise UX

Last week I participated in on UXPin’s Enterprise Summit (2017). On the last day there was a panel discussion by UX gurus on the state of enterprise UX with Jeff Veen of True Ventures, Lou Rosenfeld, and Marcin Treder of UXPin and Sunita Redd of UXPin. Over and over and over I kept hearing them use the word delight. So here’s what I want to say:


Dear Enterprise UX Gurus:
STOP! Please stop using the word “delight” in the context of enterprise UX. Just stop. I’m not the only one who wants this.

Delight is creating an emotional bond with a user through pleasurable experiences IN ORDER TO SELL THEM SOMETHING. This is wholly a consumer-side idea. Enterprise users have absolutely no choice in whether they get to use our product. It’s already been decided by management.

I’m up for a replacement. I personally say I want to give the user a good day, but more importantly I’m trying to make users more efficient. I’m trying to create human capacity for the company. Yeah, it’s still using people …