Tag Archives: fonts

Reference text web fonts: ITC vs. URW Baskerville vs. Buenard vs. Caslon

Posted on by
Reply

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.

I first researched web fonts that I could test inexpensively. Then I tested them on a real web page. Here’s what I found. Currently, text (and nearly everything else) is Helvetica Neue. (All screenshots from a Mac. I’ll post IE tests soon.)

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:

Finally, all the fonts for comparison:

Helvetica Neue
ITC New Baskerville
URW++ Baskerville
Buenard
Caslon 540

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.

Related Posts

Making the California Laws Easy to Read

Posted on by
3

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?)

For comparison, here’s the original code as its presented on the state’s website. I’ve been spending a lot of time on the fonts, white-space, outlining, and navigation. Ahead on my roadmap:

  • Print feature
  • Citations to sources
  • Legal news
  • Interlinked & related statutes
  • Smart search

Navigation bar design: Verdana vs. Trebuchet MS vs. Helvetica Neue

Posted on by
2
helvetica-neue-90percent

Helvetica Neue

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

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

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.

Here’s a side-by-side comparison:

Side-by-side view

Side-by-side view

Related Posts