Web Safe Fonts – A Myth?


The term ‘web safe font’ is actually a bit of a misnomer. There isn’t actually any such thing.

The term refers to a font (or set of around 20) that are present by default on a large percentage of computer systems (windows and mac basically). A belief in this myth has lead to the widespread use of fonts such as Arial or Verdana, without proper thought to as to how the page will display for someone who doesn’t have them.
For example if only one, sans-serif, font is specified through the ‘font:’ element, and the user doesn’t have that font, it will be substituted by the browser for a default, serif font such as Times. This can totally spoil both the look and readability of the page.

This can be solved by using CSS to specify font stacks.
To begin with, CSS defines five generic font families – ‘serif’, ‘sans-serif’, ‘cursive’, ‘fantasy’, and ‘monospace’. These families tell the browser what style of font to use, therefore providing a partial solution, but we can go further.
The biggest factor in a font being ‘readable’ is it’s aspect ratio; the ratio between the upper and lowercase letters. This means fonts can roughly be split into four categories:

Wide Stack Serif – Georgia, Utopia
Wide Stack Sans-Serif – Geneva, Verdana
Narrow Stack Serif – Times New Roman
Narrow Stack Sans-Serif – Tahoma, Helvetica

With the fonts split into these categories, it means ‘stacks’ can be created in CSS whereby if one font is missing, another of the same type (wide serif for example) can be substituted.
It is coded like this (narrow sans serif used as an example):

body{
  font-family:Tahoma,Arial,Helvetica,sans-serif;
}

A stack of more than two fonts gives you the best chance of finding one that is installed on most computers, making the copy on your website as ‘web safe’ as it ever can be…

Jason is our newest graphic designer and works on photo editing, logo design and general graphic design in Brighton.

4 comments

Leave a Reply

Your email address will not be published. Required fields are marked *