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.
- What if the user has changed their system’s default sans?
- There are more platforms than Mac and PC…
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.
Addendum
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.
Update
Paul Annett just shared an interesting article with me along similar lines.
By Harry Roberts on Tuesday, March 1st, 2011 in Web Development. Tags: CSS, Typography | 18 Comments »
+
Pharalia said on 1 March, 2011 at 10:16 am
I believe that as of Ubuntu 10.10, the default sans font is “Ubuntu” http://font.ubuntu.com/, designed by Dalton Maag. It’s quite different to helvetica / arial.
Andy Kleeman said on 1 March, 2011 at 11:08 am
Hi Harry, as Pharalia has commented Ubuntu does use its own default font ‘Ubuntu’ – screenshot – http://yfrog.com/h6c9axp
Jacob Rask said on 1 March, 2011 at 12:18 pm
Neither Arial nor Helvetica are included by default on any Linux distribution I know of, due to license restrictions, which means any font stack with only those fonts and sans-serif would fallback to sans-serif anyway. There is a popular font package which includes Arial (msttcorefonts) – it might even be installed by default in some Linux distributions nowadays.
David Oliver said on 1 March, 2011 at 12:42 pm
“[...] and it is a hack.” No it’s not. :) It’s a particular use of a CSS font-family keyword which states you’re okay with a user asserting their preference over yours for the styled text in question. Giving up absolute control over styling isn’t a bad thing.
“i. What if the user has changed their system’s default sans?” Their font preference is respected.
“ii. There are more platforms than Mac and PC” Yes, and most others don’t have Arial or Helvetica.
It just comes down to your particular case and intention.
Chris Coyier said on 1 March, 2011 at 1:20 pm
What’s up Harry! I get where you are coming from, I just don’t quite feel the same way.
It’s not a hack, it’s just using browser defaults which happen to be often better in this case.
Then they deserve to get that font, they clearly want it.
Definitely. And beyond Linux, there is a host of mobile devices where fonts are the Wild West. I do not have a bunch of research on font stacks on mobile devices, but my gut tells me that declaring the default would be smart, as whatever that default is is probably one of the nicest fonts available on the limited selection of that mobile device.
–
What really should be done is a whole bunch of research with a zillion screenshots, which I think would be fun, but haven’t gotten there yet =)
Ted Goas said on 1 March, 2011 at 1:55 pm
I’d agree that it isn’t a hack, but agree with your original point Harry. There are a number of instances where this approach could go wrong.
When I first read Chris’s post, my first thought was ‘what about non article sites’. Headlines and body text fall pretty freely, but what about pages with tighter layouts?
If a font I’m not counting on is substituted for Arial or Helvetica, it might kvetch the page layout somewhere.
Though granted laying out a page with dependencies like this isn’t smart in the first place, it makes sense to avoid this kinda thing if it could break something somewhere.
Luke Connolly said on 1 March, 2011 at 3:07 pm
I’m curious… do the issues with Helvetica on PC arise from font-smoothing / OS details, or could some of those issues be resolved with another browser? (for example, does Helvetica on Chrome in PC look awful?)
This is quite frustrating. I almost always include Helvetica in the stack before Arial, and I was not aware of any large difference between Helvetica and Arial in body copy on PC.
Back to the drawing board…
Natalia Ventre said on 1 March, 2011 at 3:14 pm
The drawbacks are the same of a font stack, you never can be a 100% sure which font is the user going to see. With 5 browsers + its versions, and mobile devices, who has time left to worry about Linux?
Brando said on 1 March, 2011 at 3:17 pm
Not a hack.
If it were a hack then CSS font stacks in general are hacks because you’re still “exploiting an inexplicit feature to achieve an explicit effect” — you can NEVER be sure which fonts will be used regardless of how many you pile into your stack.
Sorry, but you are wrong, wrong, wrong.
Ted Goas said on 1 March, 2011 at 3:28 pm
@Luke: Check out Better Font Stacks; it has a good explanation of how Helvetica can display poorly in Windows at small text sizes.
Also we should remember to account for people who have cleartype turned off, something us design / devs may take for granted.
xKit said on 1 March, 2011 at 8:13 pm
> the latest sans on Unbuntu is
You typo’d.
I think the rule is appropriate in many cases. Usually you can trust that the user is using the default or has chosen something that reasonably suits their needs. Of course, most of the generic sans-serif fonts (Helvetica, Arial, Calibri, DejaVu Sans) are all perfectly acceptable and legible in cases where style isn’t too important.
As always, it’s up to the designer to choose what best suits their needs for the situation.
> it’s a hack
No, it’s not a hack. It *does* invoke a specific behavior (using the client’s default sans-serif font). But really, this detail is beside the point, and is just a nitpick of your word choice.
Tom Von Lahndorff said on 1 March, 2011 at 8:13 pm
Agree with the other commenters that this is not a hack. It’s actually a good thing to respect the OS and user preference for what is the default sans-serif font.
Yes, the OS vendor can change the default but as you say it’s probably highly unlikely and if they do I should hope they chose a better (totally subjective I know) font in which case the user get the immediate benefit without designers needing to update css.
Yes, a user can change the default themselves, but really who does this? No one I know. If someone was so into their default font so as to go ahead and change it I’d imagine they want you to respect that choice.
Yes, Ubuntu does not have Arial or Helvetica but they do have a perfectly nice looking sans-serif font that will display. I’m sure the Ubuntu community came a to sensible choice when determining what that font would be. font-family: sans-serif looks great on my Ubuntu netbook.
Unless you have a very specific look you’re going for with a font I actually feel like the prudent thing to do is to specify sans-serif and anything else is “hack”y.
Jason T said on 1 March, 2011 at 11:59 pm
If the only reason to use the “hack” is that “using Arial on a Mac where you could be using Helvetica seems daft”, why bother? Just serve Arial to all. How many Mac users will consider the missed opportunity a deal-breaker?
Mind you, both the advantages and the drawbacks of the “hack” seem trivial.
[rb] said on 2 March, 2011 at 2:48 am
“and using Arial on a Mac where you could be using Helvetica seems daft” Say’s who, at our design firm we often choose Arial over Helvetica as a design choice and we only use macs for development we are choosing it for aesthetic reasons.
Gabor said on 2 March, 2011 at 11:21 am
I would say it is the same issue as you making 4 different CSS styles for different resolutions:
1024 and up? -» you get this CSS
below 1024? -» you get this CSS
using an iPad? -» here’s your CSS
iPhone? -» there you go
and you ignore the rest. Remember the 913 px wide overlap? You shrugged it off by “I’d rather cater to the _usual_ than to serve EVERYBODY. Since MOST people use Mac and PC, and since MOST people don’t override their defaults, I’d say using sans-serif is considered a safe choice. The rest, who do? Well, I’ll take the risk.
Larry Fox said on 5 March, 2011 at 8:36 pm
I have to agree with most, this is no where near a hack. It’s default behavior. I doubt the number of pc users w/ helvetica will notice a difference or even care that they are being served arial, and they are really the only ones affected.
Plus it saves a valuable 15 bytes. ;)
Louis St-Amour said on 6 March, 2011 at 8:00 am
I can just imagine that if someone has trouble with font-family: Helvetica, Arial, sans-serif; they’ll kill somebody who uses a (gasp) web font!
Note that the font stack article was written in January 2011. Since then, better font rendering has come along in Firefox 4, IE 9 (yes, really!) and was always present in Safari for Windows, though it’s true that if you’re not using one of the built-in Windows typefaces, you may have a harder time even due to being unfamiliar with a font’s curves.
The browser will already override if you tell it to, and you can zoom in or even turn off styles if you’re an advanced user. If not, you’ll visit another webpage! Come on, folks, this isn’t rocket science. It’s user preference.
If the web stuck to defaults, we’d all be using underlines (hard to read) on grey backgrounds (also hard to read). As designers, it’s our job to bring pages to life!
Abba Bryant said on 20 April, 2011 at 9:04 pm
Agreed – this is not a hack.
You are asking for a specific, explicit, expected behavior when you fail to define more than a generic family for your font rules.
That expectation is that I should get what my os, or user preferences have set for the font on the specified elements. That is exactly what you told it to do, and exactly what you get.
It *might* be a hack (or the style-sheet author might be a hack) if you expect to get Helvetica or Arial in all browsers when that isn’t at all what you told the style-sheet to do.
As it is, you told it to do something and it will – every time – perfectly predictably. Definitely not a hack.