The Secret Sauce, Ep. 23: Choosing Fonts for the Web

Typography is a huge and critical component of the Web. So what do you need to know about web fonts for your site? Designer Michellanne Li goes into the details.

Typography is a huge and critical component of the Web. So what do you need to know about web fonts for your site? Designer Michellanne Li goes into the details.

iTunes | RSS Feed | Download | Transcript

We'll be back next Tuesday with another episode of the Secret Sauce, but for now subscribe to all of our episodes over on iTunes.

We want to make your project a success.

Let's Chat.

Transcript

Allison Manley [AM]: Hi again everyone, and welcome to The Secret Sauce, a short podcast by Palantir.net, that offers a quick piece of advice to help your business run smoother.

I’m Allison Manley, an Account Manager here at Palantir, and today’s advice comes from one of our designers Michellanne Li, who is going to talk about web fonts.

Michellanne Li [ML]: Hello, my name is Michellanne, and I am a designer here at Palantir. Today, I am going to talk to you about web fonts: what are they, and why do you need them? How do you select fonts and implement them on your website?

In the early days of the internet, browsers could only render a handful of typefaces, 5 of which became commonly used. Over time, however, browsers and font files have developed so that we literally have thousands of options when we look to select a typeface for a website.

But, first of all what exactly is a web font? According to CreativePro.com: “A webfont is a font file downloaded from a Web server and used by the browser to render HTML text.” The desktop fonts that you use in Word or Photoshop are specifically encoded to be rendered by a computer. Desktop fonts come in the following file types: TrueType, PostScript, and OpenType. However, web fonts are created to be read by browsers. Web fonts come in: TrueType, WOFF, EOT, and SVG.

So, from a technical standpoint, you need web fonts if you are building a website because they are specifically encoded for the web. But from a design standpoint, good web fonts have features that make them particularly suited to being read on a screen. For instance, they may have wider letter spacing, heavier strokes, or taller x-heights (which are the relative heights of the lower case characters). All of these result in greater readability on a screen. Users don’t spend a lot of time on each web page, so making smart design decisions is critical in ensuring that your content reaches it audience.

According to the User Experience experts at Nielson Norman Group, “the first 10 seconds of the page visit are critical for users' decision to stay or leave. The probability of leaving is very high during these first few seconds because users are extremely skeptical, having suffered countless poorly designed Web pages in the past.”

Now that we know what web fonts are and why you need them, let’s talk about the financial and technical considerations behind selecting the right fonts. The following are some guidelines to keep in mind:

Free fonts are great! . . . sort of. In 2010, Google launched Google fonts, making hundreds of web fonts available to the public free of charge. To do this, Google has collaborated with designers in exchange for a flat fee and the promise of exposure. Google fonts can be a great option if you are on a really tight budget. However, the following are risks to consider:

1. Unfortunately, Google fonts are not held to any external standards, both from an aesthetic and technical standpoint. Before choosing one, it’s wise to verify if it works in all major browsers.
2. Unlike commercial fonts, many Google fonts do not come in a range of weights or styles, such as italics.
3. Due to the Chinese government’s censorship of Google, Google fonts do not work in China. If you have an audience in China, this is important. Websites with Google fonts not only load slowly, they may appear “broken.” Although workarounds exist, they all come down to finding a different source for fonts. Some of the latest sources are Chinese services that host Google’s fonts on their own servers. Although this probably is not illegal, I would not recommend that clients use a fonts platform that did not pay for its fonts. It is, to say the least, poor form.
4. Free fonts, including but not limited to Google fonts, get enormous mileage both in print and on the web. When it comes to simple classic typefaces, that’s not a bad thing. They are like the little black dresses of typography. But, if you’re looking for a high impact display font to differentiate your website, selecting the same free font that everyone else has already used to the point of exhaustion will have the opposite effect.

All of this being said, Google fonts has some real gems and is a solid, budget-friendly option. So, why bother shelling out money for a commercial font? You should purchase a commercial font when the following are your priorities:

1. Quality: Commercial fonts are held to high technical and aesthetic standards. The best typeface foundries put an incredible amount of thought and detail into their work and can answer questions about browser compatibility, usage scenarios, and the history behind each typeface.
2. Brand consistency: If you have an existing brand that includes typefaces for print materials, it’s worth it to purchase the corresponding web fonts. In the event that you are just starting to establish your brand, now is a good time to ask if the typefaces you like have print and web equivalents and to determine how well these potential typefaces work in both kinds of media.

When purchasing a commercial font, it is important to read the licensing agreement. Font designers and retailers place constraints on the scope of a font’s usage in order to protect the value of their product.

So, at this point, you’ve picked your fonts, and you’re ready to start using them on your website. How does that work? One option is to use a hosting service for your fonts, which means that your font files will reside on the server of the company from which you obtained them, and your website will load those files. For commercial fonts, hosting is a subscription-based service. The advantages of this are:

1. Implementing the fonts on your website is as easy as adding a single line of code.
2. Web fonts get updated as the internet changes and grows. With a hosting service, your provider can push the latest versions of the font files to the cloud server, and they will be automatically loaded onto your website.
3. You don’t need to keep track of the font files.
4. Hosting services offer some great bargains. For instance, Typekit is a hosting service that is bundled into the Adobe Creative Cloud package. For no additional cost, this includes unlimited web font usage for up to 500,000 page views. All of that being said, Typekit isn’t really a bargain if you don’t need Adobe Creative Cloud to begin with. Self-hosting is another option. Self-hosting means that the font files exist on your server. The main advantage of self-hosting is the ability to subset fonts. This means editing the files to remove unneeded characters. Subsetting results in smaller files sizes, speeding up the load time of your website.

In summation, web fonts are an important component in creating a website because they are specifically designed and encoded for the web. In selecting fonts, both financial and technical considerations should be taken into account. Once you’ve determined your fonts, you can choose to use a hosting service or to self-host.

Even when we’re not conscious of it, typography is a huge part of the web. I hope this talk will contribute to making the web a more beautiful and user-friendly place!

AM: Thanks for listening to this week’s Secret Sauce! For more great knowledge, visit our website at palantir.net, or follow us on twitter at @palantir. Have a great day!

Design Site Building