Designing with Webfonts in HTML5
An Interview with Theo Skye of Monotype
How are ad agencies using fonts in their work? This week, TypeThursday spoke with Theo Skye about using webfonts in HTML5.
TypeThursday is the meeting place for people who love letterforms.
TypeThursday December is coming up for both NYC and San Francisco on Dec. 8th
TypeThursday: Theo, thanks for being here for TypeThursday.
Theo Skye: My pleasure. Thanks for having me.
TT: Thank you for coming. Really appreciate you spending the time this afternoon with me. I’d love to learn more about your background. How did you get involved with typefaces in the first place?
TS: Sure! I started my career as a graphic designer and then attended art school at Savannah College of Art and Design, and was essentially a font user for the better part of two decades, eventually co-founding a company in New York in 2008 focused on mobile advertising. I was the creative team initially at a startup and then over the course of seven or eight years, built up our creative team as Creative Director and eventually Executive Creative Director there.
TT: You have experiences as a font user from your twenty years of experience as a practitioner.
Theo’s Introduction to HTML5 Advertising
TS: Yeah. At the company I co-founded called Medialets, I had my hands in a mix of design and both back-end and front-end code. At Medialets, we essentially invented HTML5 advertising. Our vision was to be a rich media advertising platform for mobile. Mobile meaning smartphones, which were relatively new at the time.
To give you some context, the App Store from Apple launched in 2008 and we thought, “Well, with all of those apps getting made, there’s going to be a number of them that the publishers of those apps would want to advertise in, so let’s create a technology platform that enables that to happen, and let’s make sure that the ads are, frankly, worthy of being on these magic little computers in your pocket.”
Our earliest efforts there had us creating what was dubbed the world’s first shakable ad in 2009; it was a very simple full-screen ad that popped up and you’d shake your phone in order to engage with the advertisement, which would make a dancer do different dance moves in his Docker pants.
There was no click through, no messaging in the ad. It was just to get attention, and it got a tremendous amount of coverage. Forbes published an article on it with the title, “Shaking Up Advertising,” and the Wall Street Journal covered it, too.
We probably would’ve used Flash if we could have, but of course Flash didn’t work on iPhones, and then when Android came out it didn’t really work on Android either, so HTML5 was it. I was lucky enough to get a lot of — especially at the time — very unique experiences in building advertisements in a language that very few others were working within the advertising space. HTML has been around forever for building web pages and so it was just a matter of applying all those skills to the craft of building these little, miniature websites that we called ads.
TT: Sounds like you took a little pride in that feature in that Dockers ad.
TS: Yeah. It was something that we came up with as a very small team, and we had to work closely with a lot of great people to make the project happen. All those assets were sent back to me, the sole member of the creative team at that time at Medialets. I had to figure out how to make this stuff actually work in an iPhone 3G, which, while impressive, was definitely not the most overpowered device ever made. The documentation for anything related to HTML5 ads was also very scarce back in 2009.
TT: I take it from that experience you had to deal with fonts as one of the main issues with the ads you work on.
If we were using live text and styling it with a webfont, it would’ve had a huge impact. We could’ve built three individual ads instead of three hundred.
Typography in Moblie Ads
TS: Yes. Any time someone needs to create a piece of HTML5 content and they need to put text in that content, readable text, there are a couple different approaches that can be taken.
TT: What are those different approaches?
The first is to enter live text into the document and then use CSS code to style that text — the “font face” being one of the properties of style, others being size, color, et cetera. When it comes to fonts, you can either specify what a lot of people refer to as system fonts — fonts that come preinstalled on the operating system. But there’s actually no standard set. The set of system fonts on a Windows desktop is completely different than the set of fonts that come on an Android handset or an iOS handset, or a Mac desktop, for that matter. The other way to style live text in HTML5 is to use webfonts — if you know how. The implementation of webfonts is relatively straightforward, but something that has historically been far less straightforward was the licensing of using webfonts in HTML5 ads.
But what most folks that are building HTML5 ads have done, and still do, is they create images of text. Instead of using live text and styling it with a webfont, they’ll actually create a JPEG or a PNG of text, or even an SVG vector image. But effectively there’s no font file involved when the ad gets rendered, it’s just an image of text. That’s exactly what we did at Medialets probably 95+% of the time; we created images of texts, so we weren’t actually using webfonts. It was what we knew how to do. But in the course of using images of text, our unintentional decision, or default decision, to use text as images led to all kinds of other challenges downstream that we simply took for granted.
TT: What were some of those issues? Can you give an example?
TS: Sure. For example, if we were going to run an ad campaign that had text variations for folks in different geographies, different audiences, different user profiles, the advertiser might want that text to change very easily. The way we would implement that is by creating lots of images of text and then either dynamically inserting them based on where the ad was served or even, in some cases where that was impossible, prebuilding all three hundred variations of an ad, which of course then have to be maintained, because the clients always change their mind about something at the eleventh hour, so you either write a big find/replace script or you stay up until 4 am making all those changes to image files which then have to get replaced in all the three hundred ads. These are the kinds of things that we just took for granted because we didn’t know any better, whereas if we were using live text and styling it with a webfont, it would’ve had a huge impact in many cases, and in a lot of cases where, for example, we could’ve built three individual ads instead of three hundred. If I knew then what I know now, I could’ve applied this knowledge and it would’ve had a dramatic effect on the work that we did and the amount of sleep we got.
TT: In reflecting on your work experience, you found that had you learned more about webfonts and how to use it in your workflow, a lot of productivity and just a lot of pain would’ve been resolved in your professional practice.
TS: That’s exactly right. And it’s almost inaccurate to say we didn’t know how to use a webfont, because we did sometimes use webfonts, especially in cases where there was simply no other feasible choice. Some ads we built were just very copy-heavy such that creating all the images of that text would’ve just been way too large from a file weight perspective. It was misunderstandings that we had about using webfonts.
TT: I know after your work at Medialets, you moved on to working with partnerships with Monotype. At Monotype, you’re interacting a lot with type users. Are these the misunderstandings or issues you’re coming up with or other examples you can talk about?
I’ve heard some amazing points of view from folks that I’ve talked to at agencies who are on the frontlines of getting stuff built. There’s confusion on many aspects of both using and licensing fonts.
Current Understanding of Type Users
TS: Absolutely. I’ve heard some amazing points of view from folks that I’ve talked to at agencies who are on the frontlines of getting stuff built. There’s a lot of confusion on many aspects of both using and licensing fonts. Many folks have never even heard the word subsetting, and if they have, they’re not sure of the best ways to actually go about doing it. For many, their only understanding of webfonts is Google fonts; they’ve never heard of any other webfont! Or to them, webfonts means either Google fonts or converting a desktop font to webfonts, probably non-compliantly in a tool like Fonts Squirrel. And that’s all they know. Even if they’ve been to a font retailer before, they just don’t understand that you can purchase a webfont license for those fonts. They don’t understand that webfont licenses are usually or often priced on a volume or usage basis — per page view or per impression.
TT: How do you explain font licensing to such a user?
TS: When it comes to font licensing, the most important gap in understanding is the paradigm where fonts can be licensed for non-commercial use and for commercial use. That’s the way that I like to break it down. Non-commercial of course is the scenario that most designers are very familiar with: You can acquire a font from your font provider and that desktop font file’s installable on one or two machines and you can use it to build documents or images or videos or things like that. But when a piece of work has to be deployed to market, such as a website or a digital ad, for example, that needs to use a webfont file, a commercial license for that webfont has to be paid for by someone — very often the brand client, or an agency purchasing the license on behalf of the brand. Having just a basic understanding of that necessity in order to remain compliant from an intellectual property perspective is one that the font industry would be very well to promote as much as possible to font users, just to help place that paradigm into end-users’ minds. That way they’ll have a clear path and they’ll understand, “Well, okay, I’m using this font for my design work and I’ve purchased the $50, whatever it is, license to have the font on my machine to do that work, and if this work goes to market and a webfont file needs to be utilized at high volumes, then that’s going to require a separate commercial license that needs to be purchased.” Most designers have absolutely no awareness of that at all. I certainly didn’t, even when I was leading a creative team.
TT: It sounds like you believe the issue is the type industry communicating with our users.
For a lot of font users, they don’t even know what OpenType features means. They’ve heard the term but they simply do not know what it truly means.
Educating Type Users
TS: The type industry has a huge and ongoing opportunity to educate its customers. Often, end-users just don’t know how to use fonts in a comprehensive way. They understand the basics, but there’s a lot of features and extra capabilities at their fingertips, so the more we can educate users about all the things they can do with type, the more value the type will have for them.
TT: Could you clarify — Are you speaking things like OpenType features or what are you thinking about?
TS: For a lot of font users, they don’t even know what OpenType features means. They’ve heard the term but they simply do not know what it truly means. And again, since being at Monotype should be completely on top of expressing with some of the most brilliant font technology experts in the world, I’ve come to understand that OpenType features mean additional characters that can be applied like ligatures and alternates.
These are things that the common font user has absolutely no awareness of, and that creates a challenge for the font industry who’s trying to sell the value of a font. The fact is that a font designer can spend a year or two or more of their lives crafting this beautiful piece of technical art represented in a digital font file, and then users sometimes don’t understand a bunch of the features inside that font file or how to use them. It demonstrates that education is one of the font industry’s biggest opportunities.
TT: What do you think are some directions that font makers can think about when they’re talking to the font users to communicate their value of their products?
The type industry as a whole should be completely on top of expressing a lot more details [about webfonts]
Steps to Communicate More Effectively with Users
TS: When it comes to webfonts, the type industry as a whole should be completely on top of about expressing a lot more details. Instead of the typical delivery of a webfont self-hosting kit, it should include some examples, like CSS code to copy and paste, the webfont files, and some type samples in an HTML document that you open locally. They should say, “Here’s exactly how to deploy them; here are your options.” Because the current methods of communicating to customers leaves a lot to know: What about font subsetting? What if I’m only deploying my content to mobile devices? Do I need to include this EOT font file for Internet Explorer? When you get into the specifics of it all, from what I’ve seen, end users have questions and the font industry has room to grow.
The ways that people use type and the ways that people use font files in that setting are going to continue to evolve and get more and more sophisticated, especially as HTML5 continues its march, conquering new media like email, apps, VR, AR, etc. We need to be in step with an evolving typographic world, providing the expertise and tools that empower our customers to gain the most value from our products.
TT: Theo, this has been a great conversation. Thank you so much for your time.
TS: My pleasure. Thanks a lot, Thomas.
Like to learn more about designing for HTML5? Watch Theo’s webinar on producing HTML5 campaigns.
Enjoy these interviews? Sign up to the TypeThursday mailing list to be the first to know about our next interview.
Was this article interesting to you? Click the Recommend button below
