Get in touch with us today! Call us toll-free at 1.866.754.4111 or email us at sales@remwebsolutions.com
Web Design Development Kitchener Waterloo Guelph Cambridge E-commerce
This is a headshot of Joe Labrie.

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.

Subscribe to this Blog Like on Facebook Tweet this! Share on LinkedIn

Contributors

Brad Anderson
132
November 14, 2019
Show Brad's Posts
Christine Votruba
25
October 31, 2019
Show Christine's Posts
Ryan Covert
48
July 26, 2019
Show Ryan's Posts
Sean Sanderson
63
July 23, 2019
Show Sean's Posts
Matt Stern
4
July 16, 2019
Show Matt's Posts
Sean Legge
1
June 28, 2019
Show Sean's Posts
Sean McParland
17
June 28, 2019
Show Sean's Posts
Rob Matlow
84
April 17, 2019
Show Rob's Posts
Todd Hannigan
47
November 13, 2018
Show Todd's Posts