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.
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:
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?)
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
The mini-view in the sidebar
A trail of links for re-tracing your steps which shows up in two places. There’s an intuitive always-present sidebar view: for example, today’s research steps are simply marked “Today” — instead of cluttering the display with today’s date.
The second, more detailed view of the trail (see screenshot below), is under the “My Laws” tab. The table is easy to sort by date or document name.
Infinitely long for a micro-fee
OregonLaws.org is at the point where it needs a small income to help pay for the cost of running the site: the hosting fees, DNS registration, and SSL certificate fees are now a burden on my student budget. I had a two-part idea: on one hand, all the current legal content will remain free and secure as a public service. And on the other hand, the site will offer extra features that are useful for frequent visitors and serious researchers for the price of a cup of coffee per month.
And so back to the Research Trail: I’m keeping it free for the current day’s trail, as public service. But for those who become members for $2 per month, the first major benefit is unlimited access to their previous search history. I haven’t seen any other research sites offer this at any price.
Please consider joining
In closing, I just wanted to write a personal note that I greatly appreciate the support of those who’ve become members. I’ve just started this program, and so it’s only been a handful. Although not close to the break-even point, these are a great help. These small contributions are necessary to support a public service like OregonLaws.org.
The full research trail displayed in a table
A lot of small subtle pieces go into making a search experience that’s smooth and keeps the visitor in control at all times:
- breadcrumbs (“Home > Search results”),
- a new search “form” pre-populated with the previous query,
- a prompt clearly explaining the results of the last action (“Your search…”),
- an offer to continue on from here (“Did you mean…”) that doesn’t go overboard visually,
- and finally, an overall visual design that focuses the visitor’s attention on the logical next step (clicking the suggested correction).