19Nov

Web Typography 101: Understanding Non-Web Fonts

A great design requires great typography. Great typography is more than just making sure the words are legible (but that’s important too!). A picture may be worth a thousand words, but can you design with words as easily as you do a picture?

With web design, getting your words to render exactly as designed can be difficult, especially when you are using custom non-web fonts. That’s because when a web page loads, the browser is told to produce text onto the screen using a specific font. For things to work properly, that font must be stored on the computer that is operating the browser. If the web page’s code calls for a font that the user does not have installed on their computer, the designated font won’t show up! What will show up is the browser’s choice for a substitute font. Since you can’t control that substitution, you can’t control what the user will see. Sometimes those default fonts are not a pretty sight.

There are only a few generic fonts that are deemed “web safe”. If you use anything else you run the risk that your fabulous design won’t display properly.

What Makes a Font Web Safe?

To be regarded as web-safe, a font must be common to most browsers. Remember, if a site visitor does not have the specified font, the browser selects an alternative. That alternative can be based on author-specified fallback fonts and generic families or it may use a font substitution that is defined by the visitor’s operating system. Windows and Mac operating systems have different font sets installed. Only fonts that are covered by both operating systems are considered to be web-safe fonts.

Only five fonts are considered universal:

Arial

Courier New

Georgia

Times New Roman

Verdana

Why Fallback Fonts and Images Aren’t a Great Work-Around

You can try to work around the problem of web-safe fonts by defining a fallback font. A fallback font is a reserve typeface that contains symbols for as many Unicode characters as possible. If the browser or OS encounters a character that is not a part of any of the available fonts, a symbol from a fallback font is used instead. Typically, a fallback font will contain symbols representative of the various types of Unicode characters. If you’ve ever seen a crazy looking character in the subject line of a spam email, it’s caused by the use of a fallback font. You don’t want your design to remind people of spam, so fallback fonts aren’t a great work-around.

You can try to replace your custom font text with an image, but there are risks with this approach. First, because it is an image it is resolution dependent, but even more important when you use images for text you create a whole new set of problems:

Some people disable images – if this is the case, your text won’t appear at all.

Background images disappear with high-contrast style sheets or in Windows high-contrast mode.

Your image may fail to load.

Your image may slow loading of the page.

As you can see, these aren’t good ways to get your fancy fonts on the web. Let’s look at what will work and address the pros and cons of each solution.

Four Effective Font Replacement Methods

OK, we ruled out fallback fonts and substituting images for those fancy fonts. Let’s see what will work!

@font-face

This is by far the most basic solution to your font problem. @font-face requires no web technology other than CSS. It lets you load a font file from your CSS and then apply that font to the styling of your HTML text. You should be familiar with @fontface, but if you aren’t here’s a quick guide.

Pros:

Powered by CSS, no JS

Completely accessible

Easy to implement without external plugins

Unicode support

Font Styling (CSS) support

Cons:

Limited to open source fonts

Some fonts can be heavy to download

No common font-file format on all browsers

Distribution isn’t allowed

The distribution issue is a biggie. This means you can’t use this method for templates or themes without first securing your own distribution license.

Fonts.com

Fonts.com has a specialized web font service which boasts over 40,000 fonts for you to use in your web designs. It is a subscription-based service that it is priced on a monthly basis. They even have a free, limited service if you want to just dip your toe in the water to see if you like it. In comparison with Typekit (another font service), there are far fewer restrictions on the fonts. The free package limits access to 8000 fonts but the Standard package gives you access to the entire library. With a font library that large, you know you will find great standards such as Helvetica, Univers, and Franklin Gothic as well as an amazing array of custom fonts.

Pros:

Large selection of fonts and styles

Exclusive home of Helvetica®, Frutiger®, Univers® and other celebrated fonts

Language support

Cons:

Monthly fees if you need more than the limited free service

Limited to their library (but it is large)

Google fonts

Since Google first launched its Google Fonts API, the service has grown to include over 700 fonts that are freely available for use in your designs. Even though it started with a small collection, the service was a hit from the start. Now that it has an entire library of styles available it’s certainly one of the best free custom font solutions. Did we mention it was free?

Pros:

Powered by CSS, no JS

Completely accessible

Google hosted fonts are often cached and load very fast

Easy to implement

Cons:

Choice is limited to a range of free fonts

Because they are widely used, your design might not look as unique

Typekit

If you need professional or classic fonts for corporate branding, Typekit is definitely the best solution. Unlike free services, Typekit by Adobe allows the embedding of popular premium fonts such as Futura, Meta, and Cocon. Because you purchase the license, distribution is not a problem.

Pros:

Largest library of fonts, including classic typefaces

Because it is Adobe, it is reliable

Easy to implement through Typekit’s online interface

Cons:

Premium service with a yearly fee depending on the number of fonts and page views you need

There’s no need to limit your designs to just a handful of web-safe fonts. With a little CSS or use of a reliable web font service, you can design with unique, beautiful fonts that meet your needs and be confident that your design will render perfectly. Still in doubt as to which method is better? Just reach out to us and we’ll help you select a solution that is most suited for your site. As always, don’t hesitate to share your thoughts and feedback in the comments below!