The Holy Grail of Accessible Fonts?

I’m a simple soul. Well, that’s not true, but I do have a deep hunger for simplicity and best practices — guidelines to help me pull together beautifully accessible websites without huge amounts of research on every detail.

Among those “details” I often wrestle with are fonts. I have this pipe dream that one day I will find the perfect font and thus will never fuss with them again. Yeah, right.

A Brief Opinionated History of Web Fonts

Once upon a time it was so simple. There were only seven content-appropriate fonts (Arial, Courier, Times New Roman, Comic Sans, Georgia, Trebuchet, and Verdana) that worked dependably cross-platform. Actually, that was the case for the majority of the Web’s brief history.

In the 1990s Verdana became the go-to font. It’s so utterly readable. But in time it fell out of style — mostly to its san-serif cousin, Arial. Still simple.

Things changed when the CSS3 version of @font-face got traction in the major browsers. Then font chaos descended upon the Web — or at least webmasters. All of a sudden we web developers had the power to use pretty much any font we wanted in our sites — and most of us were clueless about what’s best.

Fortunately for much of the Web world, a few years ago almost every front end web developer I know fell in love with the iPhone. (They are not to be confused with my back-end web developer friends, who generally prefer Android. But that’s another story.)

As we embraced our sleek new iPhones, we front-end types (so to speak) started dreaming through an Apple lens — the iPhone interface morphing into our benchmark of beauty. With this imprint on our brain came the rise of first Helvetica and then (with the iPhone 4) Helvetica Neue as the dominant font.

Which brings me to today.

What About Accessibility?

Here I am designing an accessible WordPress theme, and I keep worrying — is Helvetica Neue really the font to use?

For some early versions of my code I followed Chris Coyler’s advice for “Better Helvetica.” He recommends:

body {"font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;"}

When I used this font-stack with Chrome, font-weight 300 looked practically invisible to me, so I left that out — opting for browser engine default weights. However, because I have such respect for Chris Coyler, I did keep the Helvetica Neue Light stack…. until last week.

It just looked too thin to me — particularly in Chrome. I have pretty decent eyes for an almost-senior, and I figured if I was squinting to read it, what about low-vision folks?

Out of curiosity, I went tooling around apple.com to see does Apple (that grand Poobah of design) use Helvetica Neue on its site? To my surprise, the answer is no. Here’s a typical font-stack from apple.com:

'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif

Putting all this together, below are screenshots of how these various fonts display on my Mac.

Helvetica Neue screenshot

#1: The font stack I’ve opted for:
“HelveticaNeue”, “Helvetica Neue”, Helvetica, Arial, sans-serif

Screenshot of HelveticaNeue-Light

#2: Chris Coyler’s Better Helvetica font stack:
“HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif

Lucida Grande screenshot

#3: A typical apple.com font stack:
“Lucida Grande”, “Lucida Sans Unicode”, Helvetica, Arial, Verdana, sans-serif

I find it harder to see the differences with just screenshots like these. However, perhaps you can tell from the right margins that screenshot 2 (HelveticaNeue Light) is very thin, while screenshot 3 (Lucida Grande) has more of a headline quality?

So is #1 the holy grail of Web font stacks? Probably not, but it works for me, and I hope it does for all y’all too.