Typography is an absolutely essential part of any website design, affecting not only the look and feel of your site, but the very message it tells. It is therefore imperative that your carefully selected fonts are rendered correctly, and that your site remains as visually consistent as possible for all visitors.
If you use web fonts from Google Fonts, you may think that this problem has been solved for you, but this is not the whole story. Here, we explain the difference between web-safe fonts and web fonts, and why there is still a place for using traditional CSS font stacks.
What are web-safe fonts?
Web-safe fonts are a small group of fonts which are included as standard on all modern computers. If you specify these fonts on your site, your visitors will be able to see them correctly, whether they’re using a PC or a Mac.
- Web-safe sans-serif fonts include: Arial, Helvetica, Century Gothic, Futura, Tahoma, Geneva, Trebuchet MS, Verdana, Lucida Sans Unicorde, Lucida Grande, Impact, Charcoal
- Web-safe serif fonts include: Garamond, Georgia, Times New Roman, Times, Bookman Old Style, Palatino Linotype, Book Antiqua, Palatino
- Web-safe monospaced (fixed-width) fonts include: Courier, Courier New, Lucida Console, Monaco
The advantage of using web-safe fonts are that you can be sure they will render correctly for all visitors, but the disadvantage is that there are a limited number of these fonts, all are used very frequently across a great many sites and none are ideal as display fonts.
So what are web fonts?
Until the late 90s, web designers were very limited in the sorts of typography they could use on their sites, due to the need for compatibility across computers. Web-safe fonts were the only way to ensure consistency and so all websites tended to have similar-looking text. But in 1998 with the release of W3C’s CSS2, an attempt to improve font choice was introduced – the web font.
Rendering any remote font file using @font-face, web fonts allow designers to choose from literally thousands of fonts from online libraries such as Google Fonts, even though these fonts are not installed on their computers. Supported by Chrome, Safari, Internet Explorer and Firefox, web fonts work for 90% of internet users.
Whilst there are obvious advantages – many of the fonts are free, quick and easy to use, for example – there are also some disadvantages, namely the increased page load time and the fact that many web fonts are not well made. So careful selection is vital when choosing a web font. Remember the following:
- Be selective
- Be careful of file size
- Make sure it’s legal
- Make sure it contains the characters you need
- Always carry out thorough testing
- Don’t use a web font just for the sake of it
Font stacks
Whilst on the surface, web fonts seem to solve a lot of a designer’s problems, it is still good practice to use CSS font stacks, ending in a generic sans-serif or serif.
Typically, a font stack looks something like this:
Body {font-family: “Opens Sans”, “Arial”, “Helvetica”, sans-serif; }
Font stacks ensure that, if your chosen font fails to load, the browser will be able to render the next font in the stack, and since they only take an extra line or two of code, are quick and easy to include. If you do not have a font stack, the browser will use its own default font, which may be detrimental to your design.
What are the default fonts?
The following are the default fonts in Chrome, Safari, Internet Explorer and Firefox:
| Browser | OS | Serif | Sans-serif | Fixed | |
| Chrome | Windows | Times New Roman | Arial | Courier New | |
| Mac OS X | Times Roman | Helvetica | Courier | ||
| Safari | Windows | Times New Roman | Courier New | ||
| Mac OS X | Times | Courier | |||
| IE | Windows | Times New Roman | Arial | Courier New | |
| Firefox | Windows | Times New Roman | Arial | Courier New | |
| Mac OS X | Times | Helvetica | Courier | ||
NOTE: It is possible for users to set their own default font and size within their browser.
{module_contentholder,name=”Blog ad”}
Other reasons for using font stacks
There are other reasons for using traditional font stacks too (either instead of or in addition to web fonts):
Incomplete fonts
Unfortunately, web fonts are often incomplete and do not contain all the characters you may need for your site. This is particularly important on sites where you need foreign, mathematical or unusual characters that may not be included within the standard web font. It’s essential to check which characters are included, as well as creating a ‘fallback’ option with a CSS font stack.
Network problems
In order for a browser to load a remote font with @font-face, it needs an internet connection. If a web font’s server is down for maintenance, the browser will revert to its default font, unless you have specified a web-safe font in your font stack.
Where @font-face is disabled
Although infrequently used, it is possible for a user to switch off @font-face in order to speed up page load times. If a user has a particularly slow connection, this might be desirable, and unless you have a font stack in your CSS, it can prove disastrous for the look of your site.
Where @font-face is unsupported
Another potential issue is that older browsers don’t always support @font-face. This affects approximately 10% of users, which although not a huge number, is still fairly significant.
Conclusion
Hopefully this blog post will have highlighted the main reasons why it is still important to use traditional CSS font stacks, either as an alternative to web fonts or in addition to these. For just a line or two of extra code, you can be assured that all your visitors will see your site at its best and not need to compromise on typographical or design quality.