Cure for the Common Webfont, Part 1: Alternatives to Arial (and Helvetica)
Arial gets a lot of guff, and most of it is well-deserved. But whatever you think of its shady origins or shaky design, the fact remains that it was made for the screen, and it’s the only all-purpose, full-family sans serif that is guaranteed to be viewable by 99% of web users. Until recently, that is.
2010 is the Year of Webfonts. It seems a new webfont service is popping up every month, and many print typefaces are being reengineered for optimal rendering on multiple platforms and browsers. The days of relying on Arial, Georgia, Lucida, and Verdana are past. So now that a world of new options is opening up to web designers, let’s take at look alternatives to the old “web safes”, starting with the most common one of all.
Arial and Helvetica are grotesques, a typeface classification typically defined by fairly small apertures. This is not ideal for reading, especially at low resolutions and small sizes where an ‘e’ and ‘c’ are not so different from an ‘o’. But not all grots have closed forms. FF Dagny is especially open and legible. I can personally vouch for its performance in our redesign of Typographica and The Mid-Century Modernist.
Armitage is comes from a pedigree of sans serifs that preceded Helvetica and Arial. Heavier in the middle, with a lower x-height and quirks like the short middle bar on the ‘E’, it has more of a vintage flavor than the neo-grotesques. It’s not the best choice for long text, but is quite serviceable at 12px and above. For emphasis, I would avoid the finicky italic and use the nicely rendered bold instead.
If you’re looking to replace Arial with a more geometric face (think more circular ‘o’) Proxima Nova is a clean option with a large range of weights and widths. It looks especially handsome in all-caps where it has that universally appealing straightforwardness made popular by Gotham (a follower).
FF DIN goes the opposite direction of Proxima with shapes far more square than Arial. This makes for very sharp renders on screen where straight lines behave better than curves and diagonals. It was also painstakingly re-hinted to perform as well as possible on Windows.
Usable on Typekit’s free trial account, Museo Sans is the most economical option of the bunch. Like Proxima, it’s more of a humanist or geometric sans than a grotesque, but it’s well suited for most content and should fill in nicely where Arial once stood. It’s also a much better text face than its more popular pseudo-slabbed cousin, Museo. The only drawback: at this price it’s in danger of overuse. If a distinctive look is important to your site, go with something else.
As you preview these webfonts, keep in mind that they will appear very differently on each browser and platform. Most fonts that haven’t been hinted well render very poorly on any version of Windows. Test before you buy! Most webfont services will offer a live preview that you can test on your Windows machine. Take advantage of tools like Typekit’s screenshots and FontFonter which lets you see webfonts directly in the context of any web page.
Did I overlook your favorite web sans? Feel free to let me have it in the comments, but keep in mind this is just the first post in a series. Still to come are alternatives to Lucida (humanist sans), Verdana (small text), and Georgia (serif).
Comments are closed on this entry.