I came across this nice, simple, typographic website. It was set in Arial font for some reason. Couldn’t help wondering how would it look like set in Helvetica instead.
You can see that the letters on the right are more harmonious and ‘mature’ while the ones on the left seem to be bit chaotic, have some random, unexpected features. This is because Arial was designed for the early, bitmap-font laser printers in times that no one dreamed about hi-res displays. Since the post-script technology, with its vector fonts, was the still in its infancy, designers of Arial didn’t waste time on following any particular design concept and just borrowed various features from popular sans-serif font families as they seemed fit. As far as I can tell, they focused more on the legibility in small sizes than aesthetics.
Helvetica on the other hand was designed before the digital age, therefore presents much better proportions, stable lines and generally better attention to detail. It looks a lot better than Arial in larger sizes.
Let’s take a closer look at the number characters in Arial font compared to Helvetica.
Web Developer add-on for Firefox allows you change any CSS property in real-time. It can be useful when testing various fonts for your website.
Different browsers have different font rendering engines so the look of the particular fonts will vary in e.g. Chrome, Firefox or IE. I used this simple HTML document to test the font rendering in Safari. You can see the results below.
It is interesting that smaller it gets, Arial seems to be most legible, Helvetica gets strange shapes and Helvetica Neue gets blurred loosing on clarity. The lost-legibility effect is best visible on non-retina display, retina gives a lot of extra clarity, but both Helvetica fonts still have problems with kerning (letter-spacing); it is probably better to avoid them in the tiny sizes (less than 12px).
Below there is another real life example. Using developer tools in Firefox I changed the original Arial font used on the BBC weather website to Helvetica and placed the both original and changed website next to each other.
While there is no much of a difference between them I am convinced that viewing the page set in Helvetica is a better experience on various levels.
Closer look at the origins of both fonts – see http://ilovetypography.com/2007/10/06/arial-versus-helvetica/