Written by Harry Roberts on CSS Wizardry.
Chris Coyier’s sans-serif hack article has been doing its rounds lately, however it isn’t without its drawbacks… and it is a hack.
For those who aren’t familiar with it, the trick is to specify
font-family:sans-serif; as opposed to a detailed font stack in order to serve Helvetica to a Mac and Arial to a PC. Helvetica doesn’t look too great as body copy on a PC, and using Arial on a Mac where you could be using Helvetica seems daft, so enter the sans-serif hack; each OS gets its default.
However there are problems.
The chances of a user altering their default sans is admittedly pretty slim, but it could certainly be a possibility. And who’s to say that the OS vendors themselves won’t change the default sans? What if the next Windows release starts using Calibri as its default? Then you’re serving Helvetica on a Mac, Calibri on Windows 8 and Arial on Windows 7 and under. This is speculation, but worth bearing in mind.
The second issue lies with the fact that it assumes everyone has either a PC or a Mac… according to this forum entry the default sans on Ubuntu is DejaVu Sans. I have no definite confirmation of this so if anyone has a definite answer please let me know. A number of people have told me the latest sans on Unbuntu is, well Ubuntu.
The hack itself is kinda useful, and I’ve used it myself. I actually write about it in an upcoming article I’ve written for Smashing Magazine where I do actually elaborate on the drawbacks.
Furthermore, I have actually used this hack myself before. It’s not the worst hack in the world, but it’s vital to understand that it is a hack, and what its implications are.
It’s a shame that Chris didn’t outline these himself in his article, but several readers have left comments to this effect.
Don’t just use code out-of-the-box, look at its flaws and understand them fully before putting anything into practice.
Okay so one or two people have said that this isn’t a hack. In this context it is, and here’s why…
It exploits a behaviour that we cannot be certain of. That’s what hacks do… You’re using code that will only work on hope and chance to serve a specific font. You’re exploiting an inexplicit feature (standard fonts) to achieve an explicit effect. The motivation behind serving up a specific font based on chance and hope is nothing but a hack, and hacks are bad…
In the context of saying ‘Hey, I really don’t mind what font this site uses, the users’ preference will do just fine’ then this isn’t a hack, you know what the outcome will be, you want the default. If you’re hoping that that default will be Helvetica or Arial, then you can’t be certain. You’re leveraging a possibility. You’re using a hack.
Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.
I am available for hire to consult, advise, and develop with passionate product teams across the globe.
I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.