Our Blog Page Page Icon  

Our Blog.

Humans writing words that span topics from support to design to content management and beyond!


Web Fonts - Current Limitations, Solutions and the Future

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 Google+ Share on LinkedIn


Sean McParland
October 27, 2016
show Sean's posts
Todd Hannigan
October 26, 2016
show Todd's posts
Christine Alon
October 20, 2016
show Christine's posts
Shauna Ramsaroop
October 13, 2016
show Shauna's posts
Jillian McBurney
October 3, 2016
show Jillian's posts
Sean Sanderson
September 29, 2016
show Sean's posts
Rob Matlow
September 26, 2016
show Rob's posts
Ryan Covert
August 4, 2016
show Ryan's posts

Latest Posts

Show All Recent Posts



Everything Content Management Technology Design Holidays Off Topic Support New Features Personal Gaming New Clients SEO REM News Project Management Account Management Training
Home Our Work Our Team Our Services WebWiz@rd™ Support Contact Us  


72 St Leger Street, Unit 2

Kitchener, ON, N2H 6R4

P: 519 884 4111 | TF: 1 866 754 4111 sales@remwebsolutions.com


Client Centre Login


Accessibility & Compliance Privacy Policy
© Copyright 2016 REM Web Solutions. All Rights Reserved.
Web Design and Content Management by REM Web Solutions.
FaceBook Twitter Linked In YouTube Google Plus our blog