Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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, is there an optimal font for fitting the most readable text in the smallests 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.

Chart with limited space

share|improve this question
4  
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? –  Steve S Feb 2 '11 at 23:26
    
This is on a chart in a windows application, the x-axis labels have very little room. –  Richard DesLonde Feb 2 '11 at 23:34
1  
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. –  Richard DesLonde Feb 3 '11 at 0:11
1  
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. –  Steve S Feb 3 '11 at 15:08
1  
@Steve - I totally agree. I've added some suggestions along these lines in my answer too. In this I would probably recommend a vertical layout where the bars are laied out extending to the right side and with the labels on the left. –  jpierson Feb 4 '11 at 3:26

9 Answers 9

up vote 44 down vote accepted

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 your developing for, you may also want to look at modifying font metrics if possible. In .NET with WPF I recall there being quit 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 that is 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. enter image description here

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.

enter image description here

share|improve this answer
7  
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. –  Marjan Venema Feb 3 '11 at 7:15
    
@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 DesLonde Feb 3 '11 at 7:25
    
@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. –  jpierson Feb 3 '11 at 13:06
    
@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. –  jpierson Feb 3 '11 at 13:12
1  
+1 for answering the question but recommending other solutions. –  Steve S Feb 3 '11 at 15:14

Arial Narrow. Funny, nobody mentioned it (At a cursory glance through the answer). I have used it to good effect in all MS apps. Neeraj.

share|improve this answer
1  
Do you have any reference why Arial Narrow is the best? –  Benny Skogberg Jun 8 at 6:03

Based upon my document, I would say that Bodoni MT Condensed has given me the most characters per page at 12 pt font. It seems rather legible. Compared to the other fonts mentioned above, my document which was over 30 pages long with double spaced lines, ended up at only 23 pages with the Bodoni MT Condensed font. There were other fonts which actually decreased the number of pages, but the fonts were just to small.

share|improve this answer
1  
What criteria are you using to determine legibility? To be useful, there has to be an objective test set to determine whether something is usable. –  Charles Wesley May 19 at 18:55

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!

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.

share|improve this answer

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.

share|improve this answer

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.

font comparison at 10px

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.

share|improve this answer

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.

share|improve this answer
1  
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. –  JonW Jun 14 '12 at 18:42
    
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. –  KingOfHypocrites Jun 15 '12 at 0:48
    
@JonW I can't add a screenshot without it compressing it. Not sure how to email you one on here either :/ –  KingOfHypocrites Jun 15 '12 at 0:55
    
I created a screenshot... You be the judge. I may post another thread seeking some alternative fonts that will play will with Segoe UI. img835.imageshack.us/img835/7104/numericaldata.png This is from our stat centric product (c) www.statcentric.com –  KingOfHypocrites Jun 15 '12 at 17:24

Coda

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:

Lastname, Firstname

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.

share|improve this answer

I find Verdana to be ideal for small font sizes (not so much for bigger ones). Or, if you can, you could use a pixel font.

share|improve this answer
    
See my answer above. I've added Verdana to the list and unfortunately it doesn't pass the test at 9pt but I can't say that this holds true for larger sizes or yet even smaller sizes. Also I should add that character frequency is also very important for an accurate comparison and my examples don't do that any justice. –  jpierson Feb 4 '11 at 3:22
    
Pixel font... that's the way to go when things get really small. –  Shashank Sawant Apr 14 '13 at 22:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.