Arial vs Helvetica: what’s the difference and which one to choose?

The difference between Arial and Helvetica may seem subtle, but it can make a significant impact on your design. As a web developer or designer, understanding these differences and choosing the right font for your project is crucial. In this article, we’ll explore the characteristics of Arial and Helvetica to help you make an informed decision.

Origin Stories

Arial and Helvetica are both sans-serif typefaces, meaning they lack the decorative flourishes found in serif fonts like Times New Roman.

• Arial: Designed by Robin Nicholas and Patricia Saunders for Microsoft in 1982. Its origins lie in the need for a font compatible with early computer screens and dot-matrix printers.
• Helvetica: A classic created in 1957 by Max Miedinger and Eduard Hoffmann at the Haas type foundry in Switzerland. It embodies the clean, modernist aesthetic of its era.

When it comes to legibility, Arial is often considered more readable on low-resolution screens and at tiny sizes. This is because it was specifically designed for early computers. However, with the introduction of high-resolution displays, screen resolutions now regularly exceed 300ppi and can reach up to 450ppi in the latest phone models. This advancement diminishes the need for fonts like Arial that were optimized for older technologies, making the beautifully drawn, 1950s font Helvetica a preferable option.

It’s important to note that different browsers have varying font rendering engines, so the appearance of a particular font can differ between them, especially at small sizes. For example, Safari on a MacBookPro Retina 15-inch (220ppi) may display fonts differently than Google Chrome on a Windows computer.

Speaking of Windows, the font rendering works differently on this operating system compared to macOS, iOS, and Linux. Windows’ rendering engine optimises for crispness but often neglects the actual shapes of letters, resulting in crisp but somewhat deformed characters. There used to be a tool called Gdi++ that could improve font rendering on Windows, but it is no longer maintained.

As designers, we should not limit ourselves to one particular operating system or browser. Since Helvetica is not included by default on Windows systems, it’s recommended to provide a font stack that includes Helvetica as well as other sans-serif fonts like Arial, Verdana, or even Roboto to ensure cross-platform compatibility. Including Verdana or Roboto in the default font stack may not be necessary unless custom fonts are planned, which is beyond the scope of this article. Generally, the generic fallback ‘sans-serif’ should ensure compatibility with other less common devices and operating systems. Testing the font rendering on various platforms can help ensure that the chosen font and font stack render correctly and legibly across multiple devices and browsers.

Summary

So, which font should you use? If you’re designing for screens with low resolutions or tiny sizes, Arial is the better choice. However, for high-resolution displays and larger font sizes, Helvetica is the way to go. As a web developer or designer, providing progressive enhancement that will benefit the majority of your audience who use iPhones, iPads, and Macs is essential. An example font-face definition would be:

/* Prefer Helvetica */
body {
     font-face: Helvetica, sans-serif;
}

/* Prefer Arial */
body {
     font-face: Arial, sans-serif;
}

/* Let the device choose */
body {
   font-face: sans-serif;
}

In the Arial vs. Helvetica debate, there’s no single “right” answer. The ideal font ultimately depends on your project’s specific context, audience and your personal preferences as a designer.

Some designers may have a strong affinity for Helvetica’s timeless elegance, while others might appreciate Arial’s historical significance and wider availability. Still others may simply prioritise legibility and opt for the default sans-serif system typeface, which varies across devices (e.g., Roboto on Android).

Why does Arial seem more popular?

The easy answer is that most people wouldn’t tell the difference, but it might be more complex than we think.

The widespread adoption of Arial over Helvetica can be linked to Microsoft’s decision to exclude Helvetica from Windows entirely. While the exact reasons remain unclear, several possible factors contributed to Arial’s dominance.

One plausible explanation is the cost of licensing Helvetica; however, this is just my wild guess. Moreover, Arial, originally designed to be metrically compatible with Helvetica, was also optimised for early desktop printers, ensuring cleaner prints on lower-resolution devices.

Additionally, on the pixelated screens of the 1990s, the differences between Arial and Helvetica were hard to discern, especially with the Windows hinting method mentioned earlier.

These factors combined to give Arial a firm foothold, making it the default sans-serif choice for millions of users worldwide, despite Helvetica’s enduring appeal in professional design circles.

Conclusion

The most crucial takeaway is to make informed choices. Understanding the subtle differences between Arial and Helvetica empowers you to select the font that best aligns with your design goals and user experience considerations. Whether you prioritise beauty, readability, or cross-platform consistency, thoughtful font selection is a key element of crafting impactful designs.

References

• The origins of Arial and Helvetica font faces: I Love Typography
• Download Gdi++ smooth fonts in MS Windows (32bit only) (.zip)

Related

• Learn more about free vs commercial fonts in our article on Choosing the perfect font for your business