I’ve been re-evaluating fonts for WebLaws.org, and one issue that caught my eye is the style of the numerals. In running text, these proportional oldstyle numbers (font: Buenard) are perfect: they visually flow with the text. The wide variations in figure height and positioning help the reader unambiguously read the number.
But in a vertical navigation bar, I’ve chosen Georgia for its monospaced oldstyle numbers: the monospacing enables the reader to easily compare numbers while scanning vertically. Best of all, the font is already installed on all platforms.
It’s interesting that although the navbar numerals are in an entirely different font (Georgia vs. Buenard), the contrast is not jarring due to the sizes and positioning.
I spent a couple of hours today looking at web fonts for legible reference text. After reading the New York Times experiment finding that Baskerville is “the king of fonts”, I thought I’d give it a try, comparing it with a couple of others for legibility.
The sidebar is Trebuchet because I found that it’s more legible for small numbers. I like the way this looks, simply visually. But legibility-wise, I believe the text (“The presidential…”) is harder to scan with the eye than it ought to be.
Font of the Baskervilles?
While looking for Baskerville web fonts, I found Buenard via Google Web Fonts. It’s very close to Baskerville, and I find it amazingly legible:
My take: In Buenard, the words hold together the best. The letter spacing is tight and the font is heavy. I feel like it’s super-easy to read. In comparison, in Caslon and Helvetica Neue, the words don’t hold together as well. The fonts look good, but for web text to be read on a screen, I think that Buenard is the best here.
I’ve been doing a lot of work to get the California Codes online, and I now have something to show for it. This is a screenshot of Business & Professions Code Section 22947.4, an anti-spyware statute. (Which is pretty cool; I wonder if Oregon has something similar. Anyone know?)
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
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.
Trebuchet MS
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.
