GM Pixel Factory

Is Your Font Safe For The Web?

When designing a website and choosing a typeface it's important to know that what you are seeing might not be what someone on another browser is seeing. This is because browsers handle web pages in different ways and people have different operating systems and software installed. We need to be confident in the knowledge that your chosen font will be easy to read and display 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 for use on the web is that not every computer has the same fonts installed. I'm not just talking about an obscure font that you have installed for a specific project; Macs and Windows PCs ship with different fonts installed, and some Windows fonts just don't exist on a Mac (and vice-versa).

Another reason fonts can differ is due to software like Microsoft Office, which comes with a bundle of new fonts that populate the Operating System. 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. safe for web graphic

Why not just use Graphics?

We could create text-based graphics for our website which would get around the problem of missing fonts, however having text rendered within a graphic means it won't be visible to search engines; this works against one of the most popular reasons for having a website, which is to get found and share information.

That being said, graphics make up a very important part of the visual experience for visitors. If a client has a custom font, that is used in their logo for example, it needs to be used online in a faithful way. In this case a graphic rendering of text might well be the best available option; the message here is to make sure you don't rely on text within graphics, unless it's applied in a well-reasoned way.

Web Fonts | Fonts for the Web | Web Safe Fonts | Best Fonts for the Web. safe for web css

Safe for Web Fonts using CSS

There are a number of websites that offer advice on the safe use of fonts; they usually show the likelihood that any given font will be installed on a PC or Mac. This information is useful, however we can go one step further than picking a font that we have some confidence in and cover more bases by using a font stack.

What is a Font Stack?

Using font stacks is standard practice in CSS, and they are a vital way of making sure the user's experience is as close to your desired one as possible. Font stacking allows you to set fonts in a fail-safe order: if your preferred font isn't available on that person's computer there's a list of best-fit choices after that, where one of them should result in a match.

A common stack can be something like: Helvetica, "Segoe UI", Arial, sans-serif

We start off with the font we'd prefer to be shown (Helvetica), then make arrangements for other fonts to fall back on if Helvetica is not available as part of the user's Operating System. As you can see this stack ends on the generic description of a sans-serif font. This is the last catch-all choice; if the person didn't have the previous Helvetica, Segoe UI or Arial installed then their computer would still choose a font that represents the original style, rather than a serif font that wouldn't be appropriate.

Web Fonts | Fonts for the Web | Web Safe Fonts | Best Fonts for the Web. google web font

Google Fonts

The problem with a font stack is that you still can't be sure what your visitor will see, though you should be able to specify something that is at least in the vicinity of what you intend. A much better approach is to use web-based fonts, downloaded as part of the design for use on the web page rather than being referenced locally from the user's computer.

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

The original method of this technique was called "Cufon", however using the Cufon process required following a few technical steps and having 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 simplified this technique is excellent. Another advantage with using Google Fonts as opposed to other services is that it comes with Google's strong focus on web accessibility and speed, showing you the expected additional load on a page and making recommendations on the number of custom font styles that could be reasonably used... not to mention you know Google are going to be around for the long haul.

Google Fonts

comments powered by Disqus

©2024 GM Pixel Factory is powered by PHDi Websites
Cookies are set by this site. To decline them or find out more visit our cookie page