Sans-serif

Chris Coyier’s post at CSS-Tricks on the sans-serif CSS font stack got me thinking. When I see things like this, I usually think, “That’s a cool hack, but how will it work on the many different platforms?” Especially Linux, since I’m a Linux user.

For quick reference, here’s what he says:

font-family: sans-serif; /* don't specify Helvetica or Arial */

• Macintosh PC’s get Helvetica by default, which is awesome
• Windows PC’s get Arial by default, which is good because Helvetica doesn’t look good on Windows
• All others get the browser’s default sans-serif font by default

Well, Linux is in the “all others” category and there are issues:

• Ubuntu (the most used distro) uses the Ubuntu font by default. It’s a nice font but has a different character, and more importantly, different metrics from Helvetica/Arial
• Many other distros use DejaVu Sans by default. Also nice (and more generic than Ubuntu), but it also has different metrics than Helvetica/Arial

I personally like Liberation Sans quite a bit. It’s a great sans-serif font that is metrically equivalent to Helvetica and I find it nicer than Arial. It’s installed on many Linux distros by default, so here’s a simple modification that will make things just a little more uniform for many (not all) Linux users:

font-family: 'Liberation Sans', sans-serif;

While I haven’t tested Liberation Sans on a Mac or Windows machine, MOST Mac and Windows users aren’t likely to have it installed and, like I say, I prefer it over Arial, so it’s OK if they do.

This still doesn’t address mobile devices much, especially if they use Droid Sans by default (which I find characteristically a little closer to Trebuchet MS than Helvetica).

Last note: I’d personally only do this for body text, where different fonts aren’t likely to break your layout. Menus, headlines, etc – be more specific about your font choice.

Anyway, those are my thoughts. Cheers.