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.
FF Dagny
Web: Typekit and FontShop | Desktop: FontShop
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.
Other websites using FF Dagny: Ministry of Type, The Design Cubicle, Tony Geer
Armitage
Web: Fontspring | Desktop: MyFonts, Veer
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.
Proxima Nova
Web: Fontspring and Typekit | Desktop: FontShop, MyFonts, Veer
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).
Websites using Proxima Nova: Nice Web Type, Twitter Media, The Sew Weekly, Stories & Novels, Devour
FF DIN
Web/Desktop: FontShop
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.
Websites using FF DIN: messagefirst, Jax Vineyards, Litmus
Museo Sans
Web: Typekit and Fontdeck | Desktop: Exljbris, FontShop, MyFonts
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.
Websites that use Museo Sans: Matt Hamm, Nice Web Type, Green Chair Clay, Adam Stoddard
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).
See also: Alternatives to Helvetica, Cure for the Common Font
Comments are closed on this entry.
1.
Florian Hardwig Aug 10, 2010
Good overview! I’d add Facit . One of Arial’s advantages – which can easily be overlooked when dealing with English text only – is its ginormous character set. That little stinker has more than 3,000 glyphs and can speak dozens of languages.
2.
Stephen Coles Aug 10, 2010
Yes, Facit is on my upcoming list for the Lucida alts. And I’m glad you mentioned language support. If you’re going to expand beyond the basic Western character sets, make sure your webfont covers languages of Central and Eastern Europe, and maybe even Cyrillic and Greek.
3.
AllanHaley Aug 11, 2010
You might also want to consider Felbridge, which was designed with on-screen legibility in mind, or Trade Gothic if you are looking for a more traditional typeface. Both are available as part of the free public beta of Monotype Imaging’s Web Fonts Services. < http://webfonts.fonts.com/>
You can also get Cyrillic, Greek, Simplified and Traditional Chinese, Japanese, Korean, Thai, Arabic, Hebrew, and Devanagari fonts from the same source.
4.
Stephen Coles Aug 13, 2010
Thanks Allan. I didn’t consider the Monotype offerings in a list of usable alternatives yet because the service is still in beta with a required ad banner. But rest-assured, I will be testing them and linking to them when they are live!
5.
anttis Aug 16, 2010
And now with Typekit supporting Adobe fonts, you can add Myriad Pro to the list.
http://typekit.com/fonts/myriad-pro
6.
Stephen Coles Aug 18, 2010
Myriad is a humanist sans . It would be considered for the Lucida alts article.
And I should clarify Monotype’s service mentioned above. No banner is placed immediately during the beta. But your account will be converted to a “Trial Tier” account after the beta period has ended, which will place a banner on your page until you upgrade your account.
7.
Stephen Coles Aug 19, 2010
The Font Bureau’s Webtype fonts and service just launched, and with it another excellent alternative to Arial, BentonSansRE . It’s a little too tightly spaced for text — that’s nothing some “letter-spacing” can’t fix — but it’s been redrawn and hinted specifically for small sizes by one of the few masters, David Berlow. It really is stunningly crisp.