I just spent several hours researching and evaluating small but clear text. Here’s what I found.
The original navbar
This first screenshot shows the navbar on one typical page. The font is Helvetica Neue. I liked it for the most part. It has a classy & appealing appearance, yet is still very functional. I’ve known, however, that this is a problematic area of the page’s design: The text is bold to give a cue that it’s a link. And the text must be very small to fit the entire names of sections in the boxes and still leave room for decent padding, and stay usable as a nav bar as well. I.e., not take up too much vertical space.
Verdana & Trebuchet MS: designed for small text
But how would the nav bar look in these fonts, which were specifically designed to be viewed on computer screens in small sizes? I was surprised by what I found.
To compare the three fonts, I changed the font-family settings and adjusted the font-size using a percentage to keep the width of the text constant in each trial.
The first thing I saw is that I didn’t like Verdana in this application: To keep the width of the lines the same, I had to reduce the font-size from 90% to 70%. Combined with the bold font weight, the result is short blobby text, and less clarity. The numbers look malformed as well: their tops appear incorrectly crunched together.
But Trebuchet MS, usually an idiosyncratic hybrid-sans-serif, looks very good. The first thing I noticed was the appearance of the number—163.688. In Helvetica Neue, the 6 and 8′s are hard to differentiate, and the number turns into a visual blob at this size. In Trebuchet, however, the 688 is instantly identifiable.
This new version doesn’t have the visual class of the original, but in the context of the whole page design, this is minor. The only change I’ll need to make is to reduce the leading (line spacing) a bit. I feel like the spacing here might be large enough to be distracting. Instead, I’ll add more vertical space between navbar entries.
Here’s a side-by-side comparison: