Using web fonts in HTML5 ads, part 2: what makes web fonts so great?

This is part two of a two-part series detailing the ins and outs of web fonts and HTML5; if you missed it, be sure to check out Part 1: What is a Web Font, Anyway?

Part one of this series talked about what web fonts are—to quickly recap, they are fonts that are not pre-installed on computers and instead are downloaded to devices on-demand when a piece of HTML5 content is loaded. And unlike type embedded in an image, web fonts are live text.

Great, you may be thinking. But why should I use them?

There are several key benefits web fonts offer that other solutions don't:

Branding

Most operating systems ship with a set number of fonts built in, easily 100 or more. That's a lot of fonts. Currently, fonts.com offers over 40,000 web fonts. That's a lot of fonts. Using system fonts limits you to a small and well-worn collection of options, which in turn can lead to generic branding. This is not to say that a tried-and-true font can't work for your brand, but using web fonts opens up a host of possibilities simply not found in system font libraries. It also allows the consistent application of a font across all environments. So even if your brand font was the Helvetica ® typeface, the only way to assure Helvetica gets applied on Windows and Android (for example) is to use a web font. This is critical since the type design is used to represent the voice of your brand.

Consistency across devices

Mobile device font libraries are even more limited than the libraries of desktop computers—some phones only have a few dozen fonts available. While a particular system font may render well on a laptop, the same may not be true on a smartphone. Web fonts guarantee your HTML5 ad—and therefore your brand—will appear the same regardless of device. 

Dynamic text

Geolocation, personalization, and translation are important elements of digital marketing these days, but you can't easily build dynamic content with pre-built text embeds.*

Live text, however, can be coded to change on the fly, allowing you to build true data-driven programmatic creative. If you want to deliver different messages to different parts of the country, for example, you simply code in the ad copy and tell the ad where to deliver it. It's equally simple to adjust the copy when it needs to be updated, and you can be certain the dynamic text will always look on-brand when using web fonts.

*-Technically you can, but A) you’d have to build an individual image asset for every copy variation and B) rebuild each of those assets for every conceivable ad size and screen resolution. A simple campaign can easily turn into a quagmire of individually designed assets. (And you’d better hope there are no edits.)

Responsive Design

Live text is scalable & adaptable, meaning it can automatically adjust to virtually any ad layout variations by increasing or decreasing the size of the font or by wrapping the text. Using live text and web fonts frees you from the constraints of fixed ad sizes and allows your brand to shine through in every case. As you might have guessed, doing this is much harder with embedded text images. As with dynamic content, you'd have to build image assets for each ad size rather than building one asset that can easily adjust to various layout parameters. 

“We are focused specifically on the responsive web design shift,” says Matthew Snyder, co-founder and CEO of ResponsiveAds, “and once our publishers, brand and agency clients got a taste of web fonts … typography became one of the most important brand engagement quality drivers for them, alongside animation, contextual content and video.”

Small screen resolution

Some system fonts are based on designs that predate the computer. They may have been optimized over time to work well on monitors and some screens, but aren't up to legibility standards of fonts designed specifically for digital screens.

Web fonts have a more open-spaced design, which accommodates lower resolution screens by putting tiny amounts of extra white space between letters and words without changing the text layout. This keeps each letter shape distinct and legible. Similarly, letters with both thick and thin lines have some weight added to the thin lines so they don't disappear into pixelated nothingness. This all means your message and branding will be legible and crisp on a wide variety of screens, everything from smartphones to digital signage in Times Square.

Simplified workflow

As mentioned above, putting text on an image is a time-consuming process. With web fonts, switching between font options is as simple as a few clicks, and final designs done in (responsive) HTML5 can simply be pushed to market. This makes it much easier to test different options and fine-tune your final design. With text in an image, a new, unique image has to be rebuilt each time you want to try a different font and, of course, for each individual ad size you need. “Designers can do things 10 times faster because they can make changes directly,” says Flite VP of Product & Design, George Penston, “which is a huge leap forward in how designers will work with type.”

“Designers can do things 10 times faster because they can make changes directly,” says Flite VP of Product & Design, George Penston, “which is a huge leap forward in how designers will work with type.”

More Space for Cool Stuff 

A typical, full font file can range from 50KB to 100, 125 or more. (Font files for Asian languages can be over 6MB!) That's a lot, considering file weight limits for HTML5 ads are usually around 200KB total. Fortunately, web fonts are hosted separately from your ad and downloaded on command, which frees up those KB for animations, higher res images, and generally more flexibility when designing your ad.

You can also subset web fonts as much as you want or need, which essentially means your ad will only download the specific characters you choose. Subsetting enables faster load times, meaning you never need to compromise on your font choice to get all the benefits of using live text.

In case you missed it, check out part one of this series: What is a Web Font, Anyway?