Web safe fonts

These days you are spoiled for choice when it comes to fonts choice. There is a font for every occasion…that suites every site and coveys the right message. The general rule is that typeface form should reflect content. Services like Google web fonts give you access to hundreds of fonts. There are some typefaces that are extremely well designed and would look great in some of the work I do but… it is important to remember that these fonts are not universally supported in all browsers so I wanted to talk about the fonts that are ‘web safe’ meaning, are universally supported by all browsers. The fear is that you spend hours deciding on the right typeface tat conveys the right message for your content; you download the font (for the really exclusive fonts not on google web fonts), import it in css and add it to a few css classes. It looks good in the latest version of Chrome, job done! Happy days! Until..you’re bored and boot up Internet explorer and check how your site looks and receive a rude awakening. You’re carefully chosen font is not being rendered in the viewport, instead the browser has fallen back to Times New Roman :O

W3schools provides a month by month set of browser statistics here. At the time of writing this 77.9% use Chrome as their default browser. I subscribe to the 80/20 rule, whereby 80% of returns come from the same 20% of work done regularly so I am playing devils advocate a bit here. But say for example you run a digital agency and have a shit hot website that looks great on Chrome. You have been working on a proposal for a new client and they are biting and there could be a lot of money on the table. You have talked up your agency saying it is leading the way in all things digital and you’re potential client is getting excited and almost ready to sign on the dotted line. They decide to check out your website on the old computer, so they blow off the dust and boot up Windows 98 and wait patiently for 45 mins while the computer starts. They launch the only browser they realise exists, internet explorer and enter the URL for your Digital agency’s site and hit enter. Their expectations are high from their conversations with you and are eager to see the kind of website a Digital agency uses to represent itself, after all if there site is no good, how can you believe the site they will make for you will be any good. DISASTER! The fonts don’t load correctly and now they are having second thoughts about giving you all their money…

Ok so the above example is a bit silly but it is to illustrate a point. And the point is, depending on your situation, it is a good idea to use web safe fonts. Not necessarily as your primary font, although this is not necessarily a bad thing, but certainly as your fallback fonts. It is a good idea to choose a web safe font that looks loosely the same as your primary font so that if the main font is not supported by the browser the secondary one doesn’t look all that different and break the whole design.

Here are some fonts that are universally supported by all browsers, there are more but these are the most common:

  • Arial
  • Courier New
  • Georgia
  • Times New Roman
  • Verdana

Personally I think Verdana, Courier New and Arial (when used right) are pretty decent fonts. I guess the way I see it is not 100% from a looks standpoint. I also factor in the fact that they will always load in every browser and that kind of safety makes me like them as fonts.

Here is a more detailed list of web safe fonts:

The fonts that fall into that middle area, covered by both operating systems, are thel web safe fonts. If you use Calibri on your webpage, Mac users won’t see it; if you use Andale, Windows users won’t see it; but if you use Georgia, you can rest assured that users of both systems will see the it.

 

Now there’s a bit of grey area here. Users of older operating systems don’t have some of these fonts we’ve declared web-safe. For example, Windows XP users don’t have Palatino or Trebuchet MS. Even worse, users of Android mobile phones don’t have any of these fonts. So when deciding on the typeface for your new site remember to take into account the web safe fonts, some of them are very nice!

 

 

Links:

  1. 15 best web safe fonts

1 thought on “Web safe fonts

Comments are closed.