Post from February 12, 2009 (↻ October 5, 2017), filed under Web Development.
This and many other posts are also available as a pretty, well-behaved e-book: On Web Development.
An extension of my post on Arial and Helvetica: For those who want or have to use Arial as their standard font, there is no point in mentioning Helvetica anywhere in the code, as in
arial, helvetica, sans-serif.
Arial is so popular that Helvetica’s almost never used. There isn’t a single test case to indicate else.
arial, sans-serif is enough. No need for ten additional characters. There never has been when Arial came first in a font list.
As many people know, Arial is not only available on almost any Windows system, it ships with Mac OS since at least 10.3, if not 10.0, and it ships with several Linux distributions, too, at least do numbers suggest so. In that respect Arial, the “scourge,” has won, years ago. We gotta give it that, in our font declarations.
About the Author
Jens Oliver Meiert is a technical lead and author (sum.cumo, W3C, O’Reilly). He loves trying things, including in the realms of philosophy, art, and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.
If you have any thoughts or questions (or recommendations) about what he writes, leave a comment or a message.
You got it backwards. It should be:
Helvetica, Arial, sans-serif;
Isn’t it better to use Helvetica when it is available, and Arial when it isn’t?
Only if it’s for headings. Never use Helvetica for body copy, cos for us PC users it looks terrible 😔
On the subject of Helvetica, I’d add to what Adrei said with:
“Helvetica Neue”, Helvetica, sans-serif
Helvetica Neue is a version of Helvetica on OS X designed for screen reading and gives much crisper text in small sizes. No need to use it for titles or stuff.
Also, another handy tip:
Don’t specify “Courier New” directly for code samples. It’s thin and gangly in OS X, and Courier is better. The problem though is that Courier on Windows is a bitmap font and looks very bad. So how do you specify Courier for OS X, but Courier New for Windows in one declaration?
(or just ‘monospace’ in your font: attribute). OS X uses Courier, and Windows uses Courier New. Crisp fonts for all.
Ditto what Kroc Camen said.
‘Helvetica Neue’, Arial, sans-serif.
Arial looks very poor on OS X, worse at those mouse-type sizes some designers seem to love. And both fonts have very similar aspect-ratio.
BTW, my pretty much stock install of Ubuntu 810 doesn’t have Arial. I know I can add it, but I’m uninterested.
But I see your point about shaving a few bytes in your stylesheet.
It’s such a pity that Helvetica looks so bad on some PCs. Ruins it for everyone.
On February 19, 2009, 15:42 CET, gareth hunt said:
The “Helvetica Neue”, […] declaration looks terrible on PCs. A lot of “big names” use it, and it must look great on Mac OS, but I have to get firebug out and remove reference to Helvetica Neue if I want to have a readable experience on their sites.
Have a look at the most popular posts, possibly including:
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out the, at least some of the most important aspects of such CSS.
Looking for a way to comment? Comments have been disabled, unfortunately.