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. TRANSCRIPT 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. 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: 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. Unlike commercial fonts, many Google fonts do not come in a range of weights or styles, such as italics. 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. 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 ty