Using web fonts in HTML5 ads, part 1: What is a web font, anyway?

The digital advertising space has changed quite a bit over the past year. This is due mostly to a major shift away from Flash and toward HTML5, which has been embraced by Google and others as the preferred platform for digital ads.

With this shift comes a whole new set of best practices that experts will advise you to follow. One of these best practices is to use true web fonts in favor of other, older font solutions. Web fonts aren’t new, so it’s possible you’ve encountered them before, but there is a lot of confusion about what, exactly, a web font is. So let’s take a look at some web font FAQs.

Web fonts vs. “web safe” fonts: what does it all mean?

You’re forgiven for thinking these terms are describing essentially the same thing, but in reality they are very different. Let’s start with some very basic definitions:

“Web safe” fonts, aka system fonts: With traditional HTML design, the web page could tell the computer “I need this text to be rendered in the Helvetica ® typeface (for example),” and, if the computer already had Helvetica installed, it did it. But Helvetica does not come pre-installed on most computers and devices, including the two most-used operating systems (Windows and Android). To address this, HTML developers could specify additional “fallback” system fonts that should be applied if needed and when available. So if the device didn’t have Helvetica on it, it could be told to use Arial ® (for example) instead. If the system didn’t have Arial either, then it could either fall back to the next font by the developer, or simply display in a default “sans serif” font as chosen by the operating system. Web safe fonts are actually groups of vaguely similar fonts that come pre-installed on popular operating systems.

Web fonts: Web fonts are not pre-installed on computers and instead are downloaded to devices on-demand when a piece of HTML5 content is loaded. Web fonts are separate font files that are referred to in the HTML5 content. For example, HTML5 developers can ask the browser, “Please download the Helvetica web font file from this URL” instead of hoping that Helvetica might be pre-installed wherever their content is being displayed and falling back to a different font if it isn’t. Using web fonts guarantees that the correct font will be displayed consistently everywhere the content is seen.

Web fonts provide a host of benefits compared to web safe fonts, which we’ll discuss in part two of this article. But from a purely functional standpoint, they allow your design to apply a consistent appearance across virtually all browsers, operating systems, and devices.

OK, but can’t I put any font I want within an image?

Yes, you absolutely can, and digital ad designers have used this technique as a workaround for years. They would simply embed the text (as pixels) in a JPEG, PNG, or GIF file along with any other imagery the design uses, which allowed them to use any font they wanted.

But! Pixels that look like text are not the same as a web font. At best, they are a bridge between “web safe” fonts and web fonts. In practice, however, this approach is severely limited in several crucial ways, namely that text overlaid on an image is neither dynamic nor live.

From a workflow standpoint, embedding text inside images is horribly inefficient and severely limits what can be done. Using this approach means a separate ad must be individually re-sized and created for each and every ad placement size. This essentially means your creative team is doing the same work over and over and over. And if the copy changes, then a whole new set of images (of text!) will need to laboriously be created.

Designing in a responsive HTML5 environment eliminates that repetitive busywork. Applying web fonts to live text not only allows text to automatically re-flow as the layout changes, but it also only takes moments to update the text when the client (invariably) decides to add an exclamation point at the eleventh hour.

To look its best, images of text also must be prepared for all the various screen resolutions and pixel densities that exist across the thousands of unique screen sizes in use today. At a minimum, this means that two image files would need to be prepared—one for standard-resolution screens and another for high-resolution. Since maintaining so many images is impractical, many ad builders utilize only a single image. This means that either high-res devices are seeing blurry text, or that low-res (and usually slower) devices are downloading more than twice as much file weight than they need to display the text. Web fonts dispense all these issues because they are rendered perfectly on every screen.

If you’ve never shopped for web fonts before, don’t worry: It’s easy. You can find web fonts pretty much anywhere you license fonts, and most sites are clear about labeling which fonts are available as web fonts and do a good job outlining the pricing structure.

Monotype, for example, offers several options. Our enterprise license includes web fonts for HTML5 ads, and you can purchase individual website and digital ad web font licenses through MyFonts.com.