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.
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.
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.
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.
.edit:
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)
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:
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.
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.
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.
Arial Narrow and Tahoma seems to be the best.
In my experience, Avenir Next Condensed is wonderfully clear, while still taking up very little space. Compared to Arial Narrow, it takes up less space and is easier to read.
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.
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.
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.
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.
Roboto, would be perfect. It can be used for any size with proper visibility.
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.
