How Fonts Work On The Web

Unless you’ve done any website design, it’s unlikely you understand the limitations of using fonts online. If you’ve got a website redesign project on your hands or want to freshen up the look of your email newsletter, you’ll need to know how fonts work on the web in order to avoid frustrating yourself and possibly the designers you work with.

The Problem With Fonts Online

In order to understand how fonts work on the web, you first need to understand how the browser through which you view the web works. When you type in a website address, click on a link to a website, or log into your webmail account, your browser reads the code that makes that content display (HTML and usually Cascading Style Sheets or CSS), interprets it, and returns the page that you view.

Within that code, the designer of the site has listed their preference for which fonts they want you to see. They set them in descending or cascading order of importance, so that if you can’t read their preferred font, the browser will display the next preferred font, and if you cannot view that font, the browser will display a generic font that you will be able to see.

The reason website designers have done this is that they have been dependent upon what fonts you have installed on your own computer. If you don’t have their preferred font installed on your computer, you won’t be able to see it. If you have none of the preferred fonts installed on your computer, the page will default to the preferred generic font style: Sans-serif, Serif, Monospaced, Fantasy, or Script.

Brands will often have custom fonts created along with their logo and corporate identity but the only people who would have those fonts installed on their computers are employees themselves. You could set your custom-made typeface as the preferred font for your corporate website, but the only time that font would ever display is when an employee was viewing the website from a company computer.

The Least Common Denominator: 21 Web Safe Fonts To Choose From

There are a zillion fonts out there in the wild but only a handful that practically everyone has installed on their computer. This was further complicated by the fact that Windows and Apple computers had different sets of fonts that came pre-installed. Ninety-nine percent of Windows machines have the Franklin Gothic Medium font installed, for example, while only 2% of Macs do.

Most people don’t install their own fonts; they go with the default set that came with their machine.

Thus, we have been left with a very small universe of fonts from which to choose that everyone can see. The reason Arial is such a common font is that it is installed on 99.84% of Windows machines and 98.74% of Macs. (CSS Font Stack lists web safe fonts by percent installed on operating system.)

MailChimp has compiled a list of web safe, cross-platform fonts. There are 21 of them.

Web Fonts

Web fonts are an attempt to solve this problem.

These are fonts that are hosted by a third party and implemented via code. Essentially, the third party provides code for you to use on your website. When the browser interprets that code, it displays the fonts from the third party host rather than from the computer that is browsing the site. Two big providers of web fonts are Google and Typekit.

The Problem With Web Fonts

Web fonts, however, can cause slow web page downloads, a performance hit you may not be willing to tolerate given the mobile-first world we live in. Web fonts, therefore, should be use judiciously so as not to incur more of a performance degradation than necessary.

More importantly, web fonts can also cause performance and rendering issues for email display.

Now that you’ve learned of the trials and tribulations of font use online, let me leave you with a little font humor…

Font Conference

Ever wonder what happens at a typeface convention when they decide whether or not to accept a new member?

Font Fight

…or what happens during an all-out typeface-off?