Helvetica vs Arial Font Comparison

View demo page →

Helvetica is a popular font among graphic designers, however it is not commonly installed on Windows/PC devices. When Helvetica is used as the font of choice for a website, this will result in the webpage displaying the fallback font Arial in the absence of Helvetica. See Better Helvetica on CSS Tricks for a good example of a CSS font stack for Helvetica.

An alternative approach is to use a hosted webfont which will result in a more consistent cross-browser appearance of text, as the browser will download the font which is to display. Helvetica is not (to my knowledge) available for use as a hosted font, however there are some webfonts with similarities and indeed closer to the mark than Arial.

I have created a demo page which compares Helvetica (light & regular) vs Arial, with two web hosted fonts stacked up alongside: FF Dagny from Typekit & News Cycle from Google Webfonts. Below is how the demo page appears in an Apple iOS device which loads all four fonts and their variations. (click to enlarge).

Helvetica Font Comparison

View demo as webpage. Note: if you view the demo on a device without Helvetica installed, you will see Arial as the fallback font for the two Helvetica examples, which will appear like the image below (click to enlarge).

Helvetica font comparison - Arial displayed as fallback

View demo page →

Comments are closed.