Fitter, happier, more productive: How web fonts can lead to workflow efficiencies

One of the most compelling arguments in favor of building HTML5 ads with web fonts is streamlined workflow. Compared to other approaches for implementing text in digital ads, styling live text with web fonts can be far more efficient and requires fewer time-draining (and soul sucking!) tasks.

First, some clarifications

For the purposes of this article, we're differentiating between two basic ways of implementing text in HTML5 ads: ads with images of text and ads with live text + web fonts.

When it comes to building the ads themselves, both workflows look similar through the initial design phase:

  1. Your design and copy teams produce mockups in Photoshop, then send them around in JPEG or PDF form for review. These mockups may include versions for multiple ad sizes.
  2. The mockups are revised until a final version is approved
  3. The original Photoshop files are typically sent to a production team that will create the HTML

In either case , you can create your ads by hand or with tools such as Google Web Designer, Adobe Animate, Hype, or even web-based ad authoring tools like Celtra, Flite, Flexitive, or Responsive Ads

This is where the two workflow paths start to diverge.

1 version versus … how many, did you say?

In the image-based-text workflow, the ad developer has to create an individual JPEG or PNG file for each block of text. That means if you have a headline, a line of body copy, and some button text in an ad, that's three image files. If you're building your ad in 6 different sizes, that's 3 images for each of the 6 individual sizes—18 in total. And finally, if your ad has multiple versions—for example, if it has four variations deploying regionally—well, it’s easy to see how the number of image files can escalate quickly. And that doesn’t even consider additional images needed for background or product hero shots—this is just the text!

With live text + web fonts, not only can the developer avoid creating all those image files, one HTML5 file can be used to create a virtually unlimited number of ad sizes. HTML5 ads can be flexible and responsive, and using live text means you can code the ad to adjust the look and feel of the copy as needed for a wide range of placements (instead of creating multiple static ad versions for each placement size).

In fact, creating flexible, responsive ad designs is likely to get far more common in 2017. The Interactive Advertising Bureau (IAB) is in the process of releasing an all new ad portfolio of flexible, responsive ad sizes that, when finalized, will become the new standard ad specifications for the industry. Using live text (with web fonts) in those flexible ads will be critical—it will often be far more difficult to manage the seemingly limitless number of images of text involved in accommodating those sizes.

But next-gen ad specifications aside, using live text in ads allows for dynamic content, such as regionally-targeted messaging, personalized copy, translations, and other variations. With image-based workflows, individual images of text would need to be created for each messaging variation. But with live text, these alternatives can be automated with code. Rules that keep text from wrapping or breaking inappropriately can also be applied—something that's particularly relevant to the next topic …

Edits

Last-minute edits happen. Whether it's late feedback from the CMO or simply an overlooked typo, it's safe to assume you'll often be editing ads even after they’ve been approved.

If you're not working with live text, a revised set of images (of text) will need to be created, probably in Photoshop, and all those images will have to be manually swapped in to replace the old ones. In addition to being tedious and jeopardizing the timelines of other projects, all of these edits and inherent handoffs between team members increase the likelihood of errors and version control issues. These situations drive production teams nuts.

Using live text, however, means your developer can go directly into the HTML5 code, update the copy, and have all the edits completed in minutes instead of hours or days.

Templates

With an image-based approach, every ad needs to be built more or less from scratch. So even if Ad A and Ad B are based on the exact same layout, they still need to be built individually—one file at a time.

With live text you can design templates that can be updated in a matter of minutes. You can reuse this ad template in the future, which makes updates simple because you don't have to create new .jpegs or export multiple ads every time. Once you have a template created, you can deploy it indefinitely because the text is live and can be edited rapidly. Edits will apply to each version of the ad, at every placement size it gets rendered in, across every screen.

Will all of this save time?

Building out individual ads with image-based text (including revisions) can easily take several hours for a relatively simple campaign, and possibly more if the campaign is complex and includes dozens of sizes and versions. Using live text + web fonts can absolutely streamline production, ease the pain of change requests, and help uncover new workflow efficiencies. But the truth is, your mileage may vary. The best thing you can do is talk to your designers and developers to get a sense of where they think live text + web fonts can improve the overall workflow.

Of course, the main point of applying web fonts to your HTML5 ads isn't to build the yesterday's ads faster, but to empower developers to build tomorrow’s ads—targeted, responsive, dynamic—just as quickly and with greater efficiency. It's what your audiences already expect, the industry will demand, and your production teams will prefer.