Reducing font size in HTML5 banners


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. (more…)

Theme by Simon Wulf