If you have had experience in either managing content or helping to finalize details for your company's website, then you’ve probably heard the term “web-safe fonts”. Basically, the simple explanation here is that any “live” or HTML/non-graphics based text you have on your website needs to be generated using a font that is installed on your computer.
You’re probably thinking "I have hundreds of fonts installed on my computer so that must give me the choice of hundreds of fonts which I can use on my website." This is not necessarily the case. When designing/building a website we always have to account for the lowest common denominator – meaning we have to try and set it up so that people with the oldest systems and least fonts available still have a good user experience while browsing the website.
This is obviously a major impediment to web designers wanting to embrace online typography without using images or Flash as a vehicle to do so. However, there is a technique we use which allows us to display the site/text/typography as we intended to those users lucky enough to have a good library of fonts installed on their computer, but also still have it be a good experience to those who don’t.
This technique is called using “font stacks”. Basically, we create a list of fonts starting with the #1 preference then degrading to other fonts that are similar and more available/in use. For example, we may have designed a site with the preference of using Helvetica.
In this case Helvetica is not a readily available (or pre-installed) font on Windows based machines so we have to choose a deprecated font in its place for these cases which is Arial. Then as a last resort “sans-serif” which will display the system’s default sans-serif font. Here is an example of this actual font-stack in proper css format:
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
The advantages (over its alternatives) of using a font stack is efficiency and speed as a short line of code like this will always be smaller/faster to load than an image or Flash based text graphic. If you are interested in what font stacks are available and in use by most web designers have a look here.
Aside from the previously mentioned alternatives there are other options like sIFR (Scalable Inman Flash Replacement) which uses Flash, CSS and Javascript and allows you to use any font you wish. But, being that it is Flash based, it won’t work on all devices and it is not ideal for body copy purposes as rendering paragraphs of text using this method would be taxing for the computer to render.
However, the future is bright! Google already offers a website that hosts fonts we can use in the sites we design which gives us more variety and other services like @font-face and technologies like Cufon are slowly working their way up the ladder. However, for the time being CSS/HTML based type has the most flexibility when using the font stack method.
