Andy Mangold

Today’s web typography article focuses on the two most commonly used sans-serif fonts in web design: Arial and Helvetica. In the professional design world, Helvetica is widely recognized as one of the finest, most balanced, sans-serif fonts available. Crafted by the Swiss typographer Max Miedinger in 1957, Helvetica has become so popular and widely used that in 2007 Gary Hustwit released a documentary under the font’s name chronicling the use of Helvetica in contemporary design. If you ever get a chance to see it, I HIGHLY recommend it.

Arial on the other hand is often considered a knock-off of Helvetica, and a bad one at that. It didn’t get its name until Microsoft adopted it into its Windows operating system as the main sans-serif font. While the average person may have trouble recognizing the difference between Arial and Helvetica, to an experienced designer they could not be more different. Aside from the detail differences, seen mostly in the letters “R” (both capital and lowercase) and the capital “G”, the spacing of the type in large bodies of content is quite different. While the utmost care was taken to make Helvetica look balanced and deliberate in large bodies of text, Arial falls short and is almost inarguably the lesser font.

Helvetica

Arial

However, this is where we as web designers run into a dilemna. While Helvetica is clearly the better font to use is almost any application, it does not come pre-loaded with any Windows operating system (just another reason to by Apple products). Using the CSS font-family attribute, we can tell browsers to use Helvetica if available and if not move down the line to Arial, (see below) but this may not always be the best plan either.

<style type="text/css">
body{
font-family:Helvetica, Arial, sans-serif;
}
</style>

While the fonts may be painfully similar to most eyes, there are fundamental differences in the way a browser will render them. Arial will render slightly taller and with a slightly greater line-height than Helvetica of the same font size. In most instances this will not be a problem, but often for things like navigation, headers, and titles, the height of the rendered text has an effect on the appearance of the page as a whole. Therefore, I must regrettably, and with the angry eyes of my designer peers burning into me, recommend that you use Arial before Helvetica in order to have your design render as similar cross operating system as possible.

<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
}
</style>

Take this advice with a grain of salt though, for I myself use Helvetica first on my site. No part of my layout is dependent on the height of rendered text, which was a conscious design choice of mine for this exact reason. As long as you are aware of the incongruities you can work around them to produce the best work possible.

< Previous Article in this Series: Fonts

Next Article in this Series: Verdana, Geneva, and Tahoma >