Arial vs Helvetica

The difference between the two is subtle yet significant. For me it is more sensed than perceived, really.

I came across a simple website. Large, black letters on white background. The font was Arial, therefore I immediately changed it to Helvetica in the browser’s web-inspector.

A web developer should provide progressive enhancement that will affect probably about 70% of the audience that uses iPhones, iPads and Macs.

A correct font-face definition example

body {
     font-face: Helvetica, Arial, sans-serif;
}

Arial will still be more legible in tiny sizes on low-resolution screens, as it has been designed for early computers. But since the ‘screen resolution revolution’ of the first half of 2010s and the introduction of Retina displays, the resolution now regularly exceeds 300ppi and reaches 450ppi in latest phone models. It is higher than in print! No reason for using those old, 1980s, dot-matrix printer optimised fonts anymore, while we can use the beautifully drawn, 1950s font instead (:

Different browsers have different font rendering engines so the look of a particular font will vary between them, especially in tiny font-sizes. Results from Safari desktop browser below, MacBookPro Retina 15inch @ 220 ppi – the pixels are still visible on close inspection.

Beautiful text fonts still don’t matter that much on Windows, though. It’s rendering engine works differently than those of macOS, iOS and Linux. I think, in fact, even a PlayStation 4 browser renders fonts more faithfully than Windows. Windows font rendering is optimised for crispiness and don’t pay much attention to the actual shapes of letters, therefore letters are very crispy but terribly deformed.

There used to be a tool that improves the look of the fonts on Windows but I think it is no longer maintained. The latest, 32bit version I used is available to download here: Gdi++ smooth fonts in MS Windows

The origins of Arial and Helvetica font faces: http://ilovetypography.com/2007/10/06/arial-versus-helvetica/