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.

    Chart with limited space

    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.

    @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

    jpierson Correct answer

    10 years ago

    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. 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

    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.

    +1 for answering the question but recommending other solutions.

    Verdana was also designed for the screen. And MS Sans Serif is just a Helvetica ripoff.

    This only answers the question of "What is the best font on jpierson's computer" for narrow typesetting. So this is hardly a good universal answer.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM

Tags used