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 On The Web
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.
[Tweet “How Fonts Work On The Web #Typography”]
The reason website designers do this is that they are entirely 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 are likely to have those fonts installed on their computers are employees themselves. You can set your custom-made typeface as the preferred font for your corporate website, but the only time that font will ever display is when an employee is 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 is further complicated by the fact that Windows and Apple computers have different sets of fonts that come 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 are left with a very small universe of fonts from which to choose that everyone will 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 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 web pages to take longer to download, which is a performance hit you may not be willing to tolerate given the increased adoption of the mobile web. Web fonts can also cause both performance and rendering issues for email display.
Now that you’ve learned the trials and tribulations of font use on the web, let me leave you with a little font humor…
Ever wonder what happens at a typeface convention when they decide whether or not to accept a new member?
…or what happens during an all-out typeface-off?
Success @ Creative PR
The mission of the Success @ Creative PR newsletter is to help you succeed in your communications career by giving you valuable tips, trends, cool tools, insights and inspiration that will help you throughout your career. Get new marketing stats every week! Click the button below to subscribe: