Webfont Handbook

By Bram Stein

There's more to choosing a webfont than aesthetics-rendering, language support, hosting, and licensing are equally crucial to communicating your message. Think of webfonts as progressive enhancement, and learn how to harness CSS and browser features to improve performance. From selection to optimization, Bram Stein's primer shows you how webfont

• Language: English
• Publisher: A Book Apart
• Release date: Nov 1, 2023
• ISBN: 9781952616945

Bram Stein

Bram Stein is a developer and product manager. He cares a lot about typography and is happiest working at the intersection between design and technology. In his spare time, he maintains Font Face Observer, Type Inspector, and several other tools for improving web typography.Bram writes for several magazines and is a contributing author to Smashing Book 5. He also speaks about typography and web performance at conferences around the world.

Book preview

Foreword

Fonts are the most

important part of any website—of any visual design—because text is the most important part of the web.* Type shapes the written information we see before we read it, and helps us decide if we are even interested in reading it.

So imagine if we all had to wear the same handful of clothes. Loading in the morning would be much faster, but we’d all look very similar and would constantly confuse one another at a glance or from the back. (And this would be the case not only when wearing safe system clothes, but also when following trends and convenience, like using geometric sans serifs for everything.)

Choosing typefaces is the most exciting part of design* and I want to encourage you to pick from the whole embarrassment of high-quality riches. Look at letters and be more daring in your type choices and combinations—but also learn what are good and not-so-good, suitable and not-so-suitable fonts. There are things beyond aesthetics that are vital to know about when using fonts on the web, like rendering, glyph sets, and licensing options. In this book, Bram helps you take on these issues and avoid technical pitfalls. He’ll get you up to speed on the more advanced font-loading tricks, OpenType features, and the latest developments in font technology.

Personally, though, I think hi-res hero images and bloated JavaScript are the pests of the web and we should stop using those and just go with type and all will be fine and fast and we’ll never have to be stingy with subsetting or worry about how many kilobytes a font file is ever again and also because fonts are the best.*

—Indra Kupferschmid

---

* subjective empirical research

Introduction

Webfonts make the web

a more diverse, visually pleasing, and readable environment. In 2016, around 60% of the top thousand sites monitored by Alexa used webfonts. And they can be used for all text on a site—not just body text, but also headlines, tables, and captions. Great, right?

Well, yes and no. Webfonts also have some issues. Consider the Mitt Romney Webfont Problem (as described by Zach Leatherman). In early 2015, Mitt Romney announced that he would not run for president of the United States in the 2016 elections. Ironically, users on slow connections saw the opposite announcement: Mitt Romney Is Officially Running for President (Fig 0).

For these users, the primary webfont for the headline loaded and displayed most of the headline. The important word not, though, was set in italic. It required a separate font file, and that file was slow to load. Oops.

And that’s not the only problem with webfonts. You have to navigate a maze of font-licensing and hosting options, too. Once you’ve selected a font, you need to make sure it supports the languages your content is written in and renders legibly on all platforms and devices. Then there are the logistics and perception issues that come with loading an external resource for your most important content: the text.

When you buy an analog book, you don’t need to download the markup, images, and fonts separately. The paper, text size, margins, and print quality have been chosen for you. What you see is what you get. On the web, you can never be sure what your content will look like. Your visitors may be using old browsers, old devices, or screen readers, or have slow network connections. They may have increased the default font size, disabled JavaScript, or have custom stylesheets. This is inherent to the web as a medium, and it affects developers, designers, and content strategists alike.

Figure

Fig 0:

Slow-loading webfonts caused an erroneous headline to appear for some mobile users (left). The correct headline is shown on the right.

Think about that. Which matters most to you—conveying your message, or conveying your message in the correct font? In almost all cases, communicating your message matters most. The web is not—or at least shouldn’t be—only for the privileged. Young, affluent people with perfect eyesight using modern devices with high-resolution screens on fast network connections constitute a small fraction of internet users. Don’t forget about the rest.

So what’s the solution? Should you avoid webfonts? No. Webfonts, if used well, are a valuable tool. This book will teach you how to select, use, and load webfonts so that they enhance—rather than undermine—your site’s perceived and actual performance.

Chapter 1: Selecting Webfonts

Throughout this book

, you’ll see me use words like character, typeface, style, font, glyph, family, foundry, script, subsetting, and rendering. These terms come from the world of print typography, and they’ve retained their usefulness when discussing webfonts. So before we delve into choosing webfonts, let’s pause for a moment to get our language straight. It’ll be over soon, I promise.

Characters are used to digitally represent natural language. The letter a is a character, and so is 永. A character can be drawn in many ways but still have the same meaning. These drawings are called glyphs. For example, the character a has several alternate glyphs: a, a (small capital, not to be confused by the uppercase A), a, and a.

A typeface is a set of glyphs that share a common design. Typefaces are designed by one or multiple type designers. Type designers can form a type foundry, which is just another name for a company that designs typefaces. A typeface can have multiple variations, commonly referred to as styles, such as italic, bold, and condensed.

A font is the delivery format for one or more typeface styles. For example, Elena is a typeface, but elena-regular.otf is a font. A font family is a collection of fonts with the same name and multiple styles. For example, Elena Regular and Elena Bold are two styles of the typeface Elena; elena-regular.otf and elena-bold.otf are two font files in the font family.

Each font has a set of languages and scripts it supports. A script, or writing system, is a way of visually conveying spoken language. Many languages share the same script; for example, English and Dutch both use the Latin script. Subsetting is the process of removing glyphs and features you don’t need from a font. This results in a reduced font-file size. For example, if a font supports two different scripts but you only need one, you can remove the glyphs needed to support the other one and greatly reduce the file size of the font. The resulting file is called a subset.

When your operating system displays glyphs on the screen, it’s referred to as text rendering. Because operating systems render typefaces in different ways, a font might look different from one operating system to the next. Some operating systems (like Windows) even offer multiple text-rendering engines, so text rendering can differ between browsers as well.

Beyond Aesthetics

Most books

Reviews for Webfont Handbook

[haloedrain · Rating: 4 out of 5 stars]

This seems like it may become dated pretty quickly, but it's a nice reference for now.