Technophobia

What issues?

One of the banes of any web designer’s life (and there are many. IE6, I’m looking at you…) is type.

Unless you want to use downloadable fonts (as we do on this site via typekit), there’s a very limited set to choose from, and even then every OS renders them differently (which is why you’ll see much greater use of Museo Sans on a Mac than a PC on here).

But almost all of the attention is paid to Windows and Mac users, whereas the greatest problems often come from Linux. Whereas almost all Mac and Windows users have common set of 10-20 fonts we can use (even if one of them is comic sans), most default Linux installs don’t have these core fonts, and at least a third of users don’t install them.

Of course, we always declare fonts with a catch-all back-up (such as 'sans-serif'), but for Linux users who've only got the default set, their sans-serif doesn’t look much like Arial or Helvetica, and worse still is a completely different size than either of them with the same settings.

While we always try and produce sites that are ‘bulletproof’ and can handle anything a user can throw at them, this is not always possible – sometimes you just have to fit a long word in a narrow column as best you can for most people, and sometimes (as happened recently) we build sites designed by agencies less familiar with the web and its intricacies than our team here.

In this recent case we did find ourselves with quite a lot of text-size related Linux bugs, so I decided to get to the root of the problem and find a long tem solution.

So what was it?

Simply, that the default sans-serif font on Linux is considerably wider than Arial or Helvetica. If you’re trying to fit the word ‘search’, for instance, into a button with a restricted amount of room, then making it fit on Linux using the defaults would result in overly large gaps and a smaller font than ideal for Mac & PC – who do represent 99% of the user base for this site. But due to the design, the excess size broke the button (and other elements) in such a way that certain aspects became illegible for Linux users.

So what’s the solution?

Simple – find a common Linux font that looks like Arial, and is the same width, or slightly narrower.

Never an easy task, but fortunately there are quite a few stats out there about font penetration on different OS’s. In particular, Codestyle have a very detailed set of results and samples.

Having looked through the numbers and samples there was a clear winner -  "Nimbus Sans L"

To compare; Arial:

And Nimbus Sans L

As you can see, it certainly isn't the same - but it is reasonably similar, and should never break a layout.

In summary

Where before we used:

 font: normal 101%/101% arial, helvetica, sans-serif; 

If we instead use

font: normal 0.8em/1.3em arial, helvetica, "Nimbus Sans L", sans-serif;

All our problems will magically disappear. Well. Not all, but some at least...

I haven't had chance to check other substitutions for common fonts, but this page shows usage stats for Linux fonts along with samples, which makes it all pretty easy.

Please feel free to add your suggestions below.

Any mentions of comic sans may not make it through the moderation process though ;-)