Oldstyle figures for better statute number legibility

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.

Research Trail

 Related Posts

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

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

Screen Shot 2012-06-24 at 10.41.08 PMI’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

Good printouts — a frequently-requested feature

Print sample - please excuse my photography.

Print sample – please excuse my photography.

ORS statutes and glossary entries now look clean and elegant when printed directly from a browser.

There’s no separate “print” link or icon—just print from your browser’s “File” menu, and the web page will re-format for paper.

There were several requests for decent printouts in the feedback forum, and from friends.

I found it a little tricky to make this work; I’m writing a separate, technical post summarizing what I’ve learned.