Times New Roman is probably the most commonly chosen fonts for resumes—the very reason you should avoid it, and why it appears on our “Worst” list. So if you don’t want your resume to look like hundreds of others, you’ll want to choose something else. And Garamond is a great alternative. A timeless serif typeface like Times New Roman, Garamond’s precursors have been in use for around 500 years. That makes it hard to read. Arial: Font designers say it has 'ambiguous' letter shapes (as in, the letters 'b' and 'd' are the same shape in reverse). But most font designers change the settings.
It really depends on a lot of factors such as what is the 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 and 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 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. 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 versionThere 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).
@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.–Aug 3 '15 at 19:32. 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 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 ).
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 which provides wide open.
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. 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.–Jun 15 '12 at 0:48. 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.
Copyright:There are two typefaces that exist: serif and sans serif. Serif fonts have extra strokes or designs on the letters, while sans serif fonts don’t have these details. It’s the difference between a font like Times New Roman and Arial, which are serif and sans serif respectively. Reading something on a screen is much different than on paper because of the pixels on a screen versus ink printed onto a page. It’s shown that serif fonts work better on print and sans serif fonts look fantastic on screen.
You’ll see when you continue down our list how the serif fonts don’t look as appealing on your screen.There isn’t a standard requirement for which fonts to use where, but that’s the rule that many graphic designers live by when working on projects. That’s why we also subscribe to that notion and compiled our list using it. Instead of one list of seven fonts, we chose to create two lists of seven that are great for reading on and seven that are great for reading on based on from graphic designers.
We then ranked according to visibility and readability, which is mostly based on how frequently these specific fonts were mentioned.For a good read that shows you how well serif fonts look on paper, check out our list of. Keep on reading for facts about fonts.