Get in touch with us today! Call us toll-free at 1.866.754.4111 or email us at [email protected] Close button
Web Design Kitchener Waterloo Guelph Cambridge AODA Development
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

Sanj Rajput
117
March 14, 2024
Show Sanj's Posts
Melissa Yates
1
February 27, 2024
Show Melissa's Posts
Rob Matlow
138
February 20, 2024
Show Rob's Posts
Amanda Turner
1
February 20, 2024
Show Amanda's Posts
Alina Litvinenko
1
February 6, 2024
Show Alina's Posts
Tabitha Doyle
1
January 30, 2024
Show Tabitha's Posts
Christine Votruba
31
August 29, 2023
Show Christine's Posts
Sean Sanderson
66
December 19, 2022
Show Sean's Posts
Haley Burton
1
December 7, 2021
Show Haley's Posts
Generic Administrator
1
December 3, 2021
Show Generic's Posts
Colleen Legge
1
November 26, 2021
Show Colleen's Posts
Sean McParland
18
August 20, 2021
Show Sean's Posts
Matt Stern
4
July 16, 2019
Show Matt's Posts
Sean Legge
1
June 28, 2019
Show Sean's Posts
Todd Hannigan
47
November 13, 2018
Show Todd's Posts