click here symbol
button faded

Is Your Font Safe For The Web?

When designing a website and choosing a typeface it is important to know what you are seeing might not be exactly what someone on another browser will be seeing. This is because browsers handle web pages in different ways and people have different operating systems and programs installed. We need to be confident in the knowledge that your chosen font will be easy to read and displayed to fit in with the style of the website.

Safe for Web Fonts

The most important piece of information to remember when choosing a font to use on the web is that not every computer will have the same fonts installed. I'm not just talking about an obscure font that you have installed for a specific project. Macs and Windows PC's have different font's installed from new and some Windows fonts just don't exist on a Mac. Also one of the main reasons font's differ is down to people having programs such as Microsoft Office installed which comes with a bundle of new fonts... again some people won't have Office so we need to be careful in our decisions as designers for the web.

(Web Fonts | Fonts for the Web | Web Safe Fonts | Best Fonts for the Web #01

Why not just use Graphics?

We could create text graphics for our website however having the text within a graphic means it won't be visible to search engines which defeat the most common reason everyone has a website which is to get found and share information.

That being said graphics can make up a very important part of the visual experience for clients and if they have a custom font that is used for their logo then it needs to be used. The main message is to make sure you don't rely on text within graphics.

(Web Fonts | Fonts for the Web | Web Safe Fonts | Best Fonts for the Web #02

Safe for Web Fonts using CSS

There are quite a few websites that offer advice on safe to use fonts and they usually show percentages of the likely hood that it will be installed on a PC or Mac such as this article: 8 Fonts you probably don't use. This information is indeed useful however; we can go one step further and be extra safe using font stacks.

What is a Font Stack?

Font Stacks are common in CSS and are a vital way of making sure the users experience is as close to your desired style as possible. Font stacking allows you to set fonts with a failsafe if your desired font is not available on that persons computer.

A common stack can be like the example below:

Arial, “Helvetica Neue”, Helvetica, sans-serif

We start off with the font we'd like to be shown and then we make arrangements for fonts to fall back on. As you can see this stack ends on a sans-serif font. This is the safest way as if the person didn't have the previous Arial, Helvetica Neue or Helvetica installed then their computer will still choose a font that represents your original style rather than a serif font that wouldn't match so well.

(Web Fonts | Fonts for the Web | Web Safe Fonts | Best Fonts for the Web #03

Google Web Font

The problem with a font stack is that you still can't be sure what font your visitor will see, even though you should be able to specify that they see something that is at least close to what you intend. A modern approach is to use web based fonts, which download the font designs used by the webpage, rather than reference them locally from the user's computer.

Google has helped promote this approach by hosting an ever increasing library of web-based fonts that are free to use. You simply reference a font in your CSS that is hosted online by Google and has been created especially to display on websites.

The original method of this technique was called "Cufon" however using the Cufon process meant you had to follow a few more technical steps and have access to the font you wanted on your computer so that you could upload it via their system and create the necessary files.

The way Google has created and simplified this technique is excellent. Another advantage with using Google's system as opposed to any other is that it shows you the expected additional load on a page and makes recommendations on the amount of custom fonts that should be used... not to mention you know Google are going to be around for the long haul.

Google Web Fonts - Safe for Web

comments powered by Disqus

Contact Us

If you'd like to speak to a Griffen Mill Pixel Factory designer, please go to our Contact Page for more information about how we work.

Latest on Twitter

We haven't set up our own Twitter account yet, so in the meantime why not take a look at what our strategic partner WebHealer is up to.

New Stuff

We've been thinking hard over the Summer about how we can help more PHD Interactive clients get access to high quality unique design without incurring the costs that tend to accompany bespoke design. There is our Silver Design service of course which is very popular and costs only 39 but PHD Interactive challenged us to come up with something else - something even better!

And so we have. We are putting finishing touches now to our Silver Gallery service. The Silver Gallery is a collection of pre-made designs, each created by an experienced designer. Clients will be able to preview their PHD Interactive website using any of these designs and choose the one they like best. Each design will be unique so once it has been chosen and paid for, no one else can have it. The cost? All we can say for now is that you will like it.

Recent Client Work

“I felt from his response to my very first email that David understood my vision with regard to the upgrade of my website. He promptly provided comprehensive information on choice of images and the colour theme. My much improved website went live within a few days. David is extremely professional in his approach and I am happy to recommend David’s services without hesitation. I love the new look of my website!” See full case study