Reducing font size in HTML5 banners

antman

I recently had my first experience building HTML5 banners during a project for an old employer. I am no stranger to banner building, but a few years back when I was churning them out like a machine, Flash was still dominating the online ad market although it’s decline could be seen on the horizon. During this particular project, I was tasked with creating two sets of banners for two similar ad campaigns, which gave me an excellent opportunity to reflect upon the differences and parallels between banner production in Flash and HTML5.

Just as before, it is very important for banners to be considerate toward the receiver’s bandwidth so as to not slow down page loading or drain a mobile data plan. For this reason, the client will often have strict demands on the maximum weight of a banner, often around 50k, even for relatively large banners. At the same time, beside these weight restrictions, the client wants a top quality result that is aesthetically pleasing and devoid of ugly jpg compression artifacts.

These demands challenge you as a developer to be quite intelligent about how you include and handle assets in your banners. This is especially true for images and fonts, the two largest contributors to the weight of your banners. In this post, I intend to focus on the usage of fonts in HTML5 banners, how it differs from the Flash days and how to reduce the size of your banner fonts with FontForge in order to get as much as possible out of you banner bytes.

Back when Flash was still the dominant platform for online ads, the built in publishing tool would take care of much of the optimization for you, even giving you a nice report on exactly how much weight each asset was contributing. For each font, Flash would go through all the static text files using that font in your project, and make a list of the characters used. It would then embed only those characters in the build, ignoring the unused ones and leaving more space for other assets.

Size report from Adobe Flash

Size report from Adobe Flash

The image above shows a size report from the Flash portion of my latest banner project. Notice the list of characters in the font table of the report, these are the only characters the banner is actually using, so embedding any more characters than that would be an awful waste of space.

HTML5 banner development, however, demands a bit more from the developer when it comes to weight optimization. While I am certain that we will relatively soon have several neat tools that provide a similar effortless optimization workflow as Flash did, in the meantime, we have to use a more hands-on approach to achieve the same results in HTML5.

For images, this mostly means making use of the ”Save for web and devices” tool in Photoshop and the handy tinypng.com, which are both suggestions given by Adform in their ”Moving from Flash to HTML5” guide. But what about fonts? Adform suggests using Fontie or similar tools to strip your font of unused characters, but the tools I have found only allows you to select whole unicode blocks to keep, which means that you’ll still get a lot more than you bargained for in a situation where all the copy in a banner uses about half of the A-Z alphabet in one letter casing. And if you, like me, often build banners in a language that adds a few extra letters, like the letters Å, Ä and Ö of the Swedish alphabet, you’ll need to include at least one additional block, in this case the Latin-1 Supplement. This means stuffing an additional 64 characters into your font when you actually only need 3 of them at most.

Let’s look at an example. A client has asked you to build a banner with a single message saying ”What an amazing product!” that can weigh no more than 50k. The client has provided you with a font in OpenType format that weighs 56k. Whew! That’s hefty. The font has already singlehandedly used up all the available space and then some! Well, no problem, you just use a font optimization tool to convert it to a nice widely-supported woff-font that weighs no more than 9k, that’s a lot better. But when you think about it, 9k out of 50k is almost 20%, meaning that your font is still taking up a fifth of the total size of your banner. And besides, since the only characters required to form the message are ”!Wacdghimnoprtuz” and a space, most of that 20% is actually wasted space. Translating the banner into Swedish (”Vilken förträfflig produkt!”) requires you to include the Latin-1 Supplement block aswell to get the characters ‘ö’ and ‘ä’, resulting in a weight of 12k. That’s an additional 3k just for two characters!

font_size_graph

So what’s the alternative? When I was confronted with the issue above (the numbers are actually taken from my latest banner project), I looked for a way to generate a woff font containing ONLY the characters needed for the messages in the banner, and nothing more. After googling around a bit, I concluded that my best bet was to use FontForge to remove all the characters I didn’t need.

To do this, start FontForge and browse to your font file. I’m using the font FredokaOne-Regular in this example. Then select a bunch of characters you don’t need and go to Element->Clear to remove them. When you’ve removed all unwanted characters, go to File->Generate Fonts and save your stripped down font as a woff-font, which should be sufficient to cover most browsers today.

Removing unneeded characters in FontForge.

Removing superfluous characters in FontForge.

Generate a new font after removing the characters you don't need.

Generate a new font with just the characters you don’t need.

Using this method, I was able to take a 56k OpenType font and generate a 5k woff font (see graph above) containing only the characters I needed, and use the remaining 45k available to make the banner look awesome. I’m positive that we will start seeing easy to use online tools popping up before long that offer a more streamlined route to the same result. But in the meantime, this relatively simple method will do what you need.

I hope that someone finds this post helpful. Feel free to leave a comment if you have any questions or want to add something.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Theme by Simon Wulf