How do you choose a font for extremely limited space, i.e. will fit the most READABLE text in the smallest space?
I often have very limited space when creating reports and dashboards for users. I usually use Arial, or Arial Narrow, but UI isn't my area of expertise, so I want to know, how do you determine an optimal font for fitting the most readable text in the smallest space?
Here is an example: Keep in mind this is just an example, as there are many times that space is limited, such as when you need to squeeze a million columns into a report, etc.
Can you give some details about why you are constrained? Is this on the desktop, web, mobile, print, or hardware? Why are scrolling and multiple pages not options? Is all of the information to be displayed really vital, or is some of it secondary?
This is on a chart in a windows application, the x-axis labels have very little room.
Any chance we can get a representative screenshot? I'm still not sure there aren't better options than reducing the font size.
Ok, edited the question with a representative screenshot. I do want a general answer as well though, that I could use for any situation where space is at a premium.
So what do you do when you have so many columns that they won't fit even with the smallest readable font? Changing the font size is almost never a real solution. It can be fine for one-offs, but you really need to look for other options most of the time.
It really depends on a lot of factors such as what is the frequency of certain characters that you expect and what fonts are available to you.
I did a rudimentary by creating a program that iterated through all of the available fonts I had installed on my Windows box at the time and printed a line containing each printable ascii character on to the screen in each of these font's. I repeated the test as well with different font sizes.
The results as I recall them were that Segoe UI and Tahoma were the best with respect to space utilization and readability for UI purposes at 10pt and 9pt sizes. In the short term we settled on Tahoma since Segoe UI isn't freely available for operating systems below Windows Vista. If you don't need to support Windows XP or older an Windows OS or other a non Windows OS then I would definitely go with Segoe UI otherwise I would go with Tahoma if it's available and if all else fails try Verdana. See this list for a lineup of available Windows fonts as well as information about the best of use of each.
Keep in mind as well that starting with Windows Vista I believe, Microsoft now recommends using a 9pt font instead of a 10pt font for UI elements since the Sego UI font displays much clearer than other fonts at low resolutions especially on flat panel displays.
Depending on what platform you are developing for, you may also want to look at modifying font metrics if possible. In .NET with WPF I recall there being quite a bit of ways to modify how the text is rendered to allow for condensing the space between characters and to make the individual characters more narrow. Using this type of technique you can stick with whatever font you like and just tweak it's rendering to get the results you need.
With regard to your specific example graph that you provided: for this particular graph I would recommend pivoting it so the text most likely to be read is horizontal for more natural reading. I would also place the number so that it is inside the each bar of the bar graph when it will fit with a color that stands out against whatever background color is there thus increasing the space for other things such as the labels. Laying out the bar graph as rows would make it easier to read and also to print on multiple pages if necessary. If a row layout is not possible then creating a separate key for each item in the graph would probably be reasonable and that way each bar could be place closer together as well to save space. The key would allow each bar to be labeled such as A, B, C... or 01, 02, 03... for example and the key (layed out in rows somewhere else) would give more detailed information about each.
Remember, a chart or diagram is mainly useful for getting quick visual information. If it becomes too much of a burden to the user/reader your probably best off simplifying it, consolidating some of the details of the chart, or just provide more raw data in a more tabular form.
Here is a simple listing showing Arial, Segoe UI, and Tahoma fonts at various sizes. Notice that the relative space taken up by each font is different at different point sizes.
Update: I've added another comparison below which shows a more complete listing of common characters including capital and lower case letters in each of the previously mentioned fonts with the addition of Verdana and MS Sans Serif (default UI font in Windows prior to Windows 2000). Unfortunately and in response to bobsoap's recommendation for using Verdana, it is pretty clear that Verdana is about the worst compared to the other fonts at 9pt although keep in mind that this may not hold true for other point sizes. Also size isn't necessarily always the most important detail, sometimes it's more important that a font is readable at small sizes than whether it is more compact relative to another font.
Just bear in mind that Segoe UI has been designed specifically for screen use (UI is in the name for a reason) and using this font may not produce the same readability when the reports are printed. IIRC Tahoma was designed for screen use as well. Using these fonts for on screen rendering of your reports is a good choice, but you may have to switch to a different font for printed versions.
@jpierson: Interesting. Tahoma has always been one of my favorite fonts just for it's clarity and simplicity. So you actually found Tahoma to be a better choice than Arial I assume?
@Richard - Better in terms of compactness not quite although it is definitely in the same league as Arial but better in terms of overall cohesiveness with the rest of our application's UI, yes. Tahoma is a reasonable non-print UI font but Arial tends too clash too me, especially on Windows XP and a lower.
@Marjan - I agree, Segoe UI is optimized for on screen viewing and may not be the best for print although I think it would warrant a try before disregarding it. For print purposes perhaps one might want to consider Calibri which is the default in many Microsoft word processing products lately and is even more compact than all the other fonts I've mentioned at 9pt, 10pt, and 10pts. Again, Calibri like Segoe UI isn't available on Windows XP by default and redistributing is likely prohibitively expensive.
Verdana was also designed for the screen. And MS Sans Serif is just a Helvetica ripoff.
You're doing it wrong.
Generally, there's an "other way". The answers to this question are all great, but honestly, you should look at all the different option. Squeezing as much text in as little space as possible always means you've botched a previous design choice.
- Perhaps you should have flipped them to be horizontal bars, giving you WAY more space to work with.
- Perhaps you shouldn't have gone with a bar chart, or shouldn't have gone with charts in the first place.
- Perhaps the problem is the actual data, and you might've had to split it up even further!
- A side-bar or legend/index could help
- Hovers might work for the online version
There are so many options, make sure you use the right one. Squeezing as much information into a single small area as possible is always the wrong way to go. Information needs space to breathe, to be readable, to be scannable and recognizable.
Yes, this generally means using way more space. But that's not a bad thing. It will take less effort for the person who consumes the data to quickly scan a couple of pages filled with well-structured information, than to figure out what that one bar means on that one-page-report. Think of the old board member, pocketing his reading glasses while passing the paper to the person next to him: "I can't read this - what does it say?"
Apologies for the harshness and slight tongue-in-cheek title, but I see that top answer and just feel that the "needs a different approach" part needed more elaboration.
Since this is a very contested answer, and fairly conflicted with the original question, I feel I should elaborate on the reasoning behind posting it.
First off: this isn't a UX question, it's graphic design or typography question.
There are assumptions in this question, the biggest one being that the "correct solution" to this UX issue is small text. But it's not. Small text becomes unreadable, an issue aggravated by tablets and other mobile devices. What if your user has bad eyesight? What if it's shown on an older, lower resolution monitor? What if there's glare from the sun or a light? So many reasons why small text can be unreadable.
As such, this answer is here to help the next person that has this issue to be mindful of not making the same mistake.
... having said that - I totally appreciate that the person asking the question simply doesn't have resources for anything but a font-change :) We've all been there, and we'll all be there again!
TLDR: I treated this question the way Henry Ford treated the call for faster horses. (Disclaimer: I'm not Henry Ford)
@DA01 Not sure everyone agrees: I'm getting a lot of negative votes! :) Perhaps I should consider removing the answer...
Dirk...this is a 'hot topic' question. Alas, a big problem with hot topic questions is a) the question is usually not that good--just popular and b) the people voting on answers are coming from other sites, so not actual subject matter experts. I think hot-topics are a problem on the SE sites. I opened up a META discussion regarding it: http://meta.stackoverflow.com/questions/288471/is-the-quality-of-hot-network-questions-a-concern-to-others
But do leave this answer. It's a good one. Don't be too discouraged by the down voters. They likely just aren't UX folks.
(Actually, this specific question may not have been a hot-topic...just a popular old one...still, same issues...)
This is a bit theory versus practice. There are times when you're only giving so many pixels and people have to see the information. But absolutely, in theory, there should be a better way to design the report.
@DirkvB I consider it better practice to not answer the question if you don't have an answer. "You're doing it wrong" does not answer the question. Making an assumption that the problem can be solved by going a different direction does not consider the constraints that are left out of a concise and direct question for help. Sometimes it is clear that the solution the submitter is requesting can be resolved by rethinking the approach. I don't know if this question qualifies for that.
Hear me out here Jason :) This is a UX forum. Asking for a font for small sizes is a graphic design question at best, a "shopping around" close at worst. My answer contains more than "doing it wrong", and also has alternative solutions to the underlying issue: mass data on a small area. I treated this question the way Henry Ford treated the call for faster horses. (Disclaimer: I'm not Henry Ford)
@DirkvB Fair enough. The reason I am even here is because I am updating an existing application. I am not tasked (nor have the time) to redesign the site, but I can make some slight cosmetic updates if they are quick and easy. In the past I have asked targeted questions with answers considering me to rethink my question (with a downvote) when they do not have the whole story...because it's not pertinent if people just attempt to answer the targeted question at hand. There are usually constraints and limitations that one many not be aware of.
@BobStein-VisiBone Did you just make a blanket statement about blanket statements? That's remarkably meta.
"Squeezing as much information into a single small area as possible is always the wrong way to go." Ummm.. isn't this what the entire field of Data Visualization is about? Thousands of data points compressed into an easy-to-use picture?
You've added a variable there though: easy-to-use. That's what you're forsaking when you squeeze all this data into a tiny area. Think of it like the old "fast/cheap/good: pick any 2". Only in this case it's "amount/space/ux: pick any 2".
Sometimes a smaller font is a good way out of a tight spot. In this particular case, at least for the part of the problem shown, there is a better solution which is both clearer, and takes half the space, like so:
I'm using a large enough font, 18pt Tahoma (open image in new tab to view full size), that the negative letter-space is OK.
@Dirk: [META] "You're doing it wrong" might be the reason you get negatives. It's a bit aggressive and fosters negative reactions. You did it wrong! :-) A better wording would be like "I suggest you evaluate a lateral thinking approach", for example.
Presuming you're referring to on-screen use on a conventional display (~96 DPI) as opposed to something like a Retina display, and you have a system with sub-pixel anti-aliasing, what you're looking for is a font with terrific pixel hinting. Hinting is the art of taking the vector curves designed for print use and customising their shape for different point sizes, usually to make major parts of the typeface align to the pixel grid. That's a matter of making compromises between how the font should look (its character if you like) with the rigid and unforgiving pixel grid. Those compromises get progressively more severe the smaller you get, since the pixel grid provides successively fewer pixels to fill in.
Many fonts have been explicitly designed for use on computer screens (generally referred to as screen fonts). Matthew Carter's set of typefaces; Verdana, Tahoma, Georgia et al are great examples; they were designed from the outset with the pixel grid in mind. That makes them inherently good for use at smaller sizes (but generally makes them look a bit awkward in print).
In general, at small point sizes (remembering point sizes refer to height), I would recommend Verdana because it has a very high x-height which provides wide open counters. That will make it wider than some other fonts, which isn't what you're looking for (based on your examples).
Fonts like Segoe UI, Tahoma and MS Sans Serif are all designed as versatile screen fonts (being the default typefaces for Windows Vista/7, Windows XP and earlier versions of Windows respectively), so they're good all-around choices (with Segoe UI being the only one designed with sub-pixel hinting in mind and being the most modern choice).
There are two factors that should also be considered when selecting a font; if you're running the type vertically the sub-pixel antialiasing is naturally different, and generally the pixel hinting starts looking a bit worse (since type designers aren't likely to have tested their faces vertically). If you're running the fonts diagonally or otherwise not on the pixel grid, pixel hinting all gets thrown out the window.
For a very detailed explanation of pixel hinting, rasterisation and all that, there's no better reference than this amazing site.
If there's any interest, I'll add a paragraph or two about print choices for very small type, but there's not much I could add beyond this amazingly good article.
It's important to specify what dimension you're trying to optimize. Are you looking to reduce size horizontally (shorter lines) or also vertically? If you are looking to optimize horizontal width, you should be looking for a condensed typeface. Arial Narrow and Helvetica Condensed are two obvious options, but I don't find them very readable and they come off as looking cheap.
For sans-serifs similar to Arial / Helvetica, but narrower, have a look at:
Myriad Pro, Open Sans, Segoe UI, Tahoma, Frutiger, Bell Gothic, Lato, Antique Olive, and Adobe's new font Source Sans Pro.
In a comparison that I did with numbers, I found Myriad Pro, Source Sans Pro, Segoe UI, and Tahoma to be the best for readability with minimum width at 9px-11px. Note that these fonts handle sizes very differently, so often a size offset needs to be incorporated to do a fair comparison.
Lato can also work well. Asana uses Proxima Nova, which is very open and readable at small sizes, but doesn't look great in a larger size as they use it.
Here's the comparison I did with everything at 10px. It's best to play around like this yourself, however, as changing font size often has a non-linear effect at these small sizes.
Others have mentioned Verdana. Verdana is very readable at small sizes, but it does not optimize width at all. That said, a wide-typeface that is readable at small sizes optimizes for height rather than width, and perhaps this is what you are looking for, but on the web where scrolling vertically is more natural than scrolling horizontally, this is usually not the case.
My personal preference is for Arial on-screen and if I'm looking for a less neutral look or if I need to optimize for width, I might look at Source Sans Pro or Segoe UI.
+1 Good range of fonts. Segoe looks fuzzy at this size, which is notably tiny, small as an insect. Never use a font size that makes your text look like an insect.
I have always loved Segoe UI but have recently had to admit that Arial is actually more readable (gasp) in many cases. If you don't believe me compare 12px Arial with 12px Segoe UI in a grid full of numerical data. Arial seems to shine. Even the sample text shown in the original answer clearly shows the Arial as easier to read. It's ugly but more readable. A lot of this is just the subtle difference in size.
Furthermore... When you take Segoe to 13px and beyond, numbers really start to look odd. Ultimately most applications are driven by data. Create a grid full of data. Switch between the two and ask a few people which is easier to read??? Hmmm..
If you are reading straight text (no numbers) at 11px, then I think Segoe is easier to read. But, whoever decided Segoe UI is an all around easier to read font than arial... I'd like to see where they got this data. I've asked several people and everyone thinks Arial is more readable for data at 12px (9pt) (including myself).
There are lot of intracacies with fonts in regards to font color as well. Segoe looks best slightly lighter... (#333333 or #212121) is usually good. Arial seems too hard to read at these colors and is usually best at solid black. Segoe UI has too much contrast and tends to look busy at solid black.
I find arial to be more readable than Tahoma personally. If you are just talking about straight readability. Tahoma may look better in a windows interface, but that is an aesthetic thing.
Spacing, font color, and font size changes everything. Don't let anyone tell you Segoe UI is a better font. It is better for certain cases, but not all. It is surely attractive though.
Hi KingOfHypocrites. Thanks for this answer, but it's a bit heavy on the subjective opinion. Truly good answers to this question would include sources and references to studies referencing these points. If you're able to back up your opinions then that would really help out readers.
All i can speak from is years of studying fonts and doing UI design. I haven't seen any studies on this particular comparison, which is why I also pointed out that people shouldn't make blanket statements that Segoe UI is easier to read. It depends on many factors. All you can do is survey others and use your own best judgement, which is what I do. I haven't found anyone that finds numerical data at 12px to be easier to read with Segoe UI. Arial is always the winner. Its thicker and bigger at that size than Segoe UI. I'll see if I can add some screenshots to my answer.
@JonW I can't add a screenshot without it compressing it. Not sure how to email you one on here either :/
I created a screenshot... You be the judge. I may post another thread seeking some alternative fonts that will play will with Segoe UI. http://img835.imageshack.us/img835/7104/numericaldata.png This is from our stat centric product (c) www.statcentric.com
I ran into an issue where font space optimization was an important factor with some software I use on Mac (Soundminer, on OS X Mavericks 10.9.5, but I imagine this could be useful info for other Mac software, and future versions of OS X as well). The program lists file metadata with fixed-height rows, and allows the user to choose the row height and font size. Word Wrap is an option, but the row height will not be adjusted to auto-fit the contents of each cell.
After going through all of the several hundred fonts on the system, the one that fit the most character data within the least amount of space, while still being legible was (surprisingly) Apple Symbols. With the font size set at 12 and a row height of 22, I can comfortably fit two rows of text, and more characters than with any other font (same size, or smaller) while still maintaining easy readability from a position of up to 3' or so from the display.
Hopefully this will prove useful to someone else out there with the same (or similar) issue.
Most of the answers here should be used only as suggestions of possible fonts to use. After readability, it's a matter of taste. (In the comment that said Verdana was clearly the worst choice, I liked it best.) I often try 8 or 10 different fonts and then decide which looks best to me. A choice also depends on context. I'm sure everyone would use different fonts for business cards for a lingerie shop and a steel mill. All the BS about serif and sans serif is a waste of time. Just use what looks good, no matter which it is.
I agree that the goal should not be to cram as much information into the text as can fit. Most people won't read all of it or even much of it. They'll look for the key points, and if those are of interest, they may read the remaining parts or, better yet, call for more information.