Your Typography Decisions Affect Performance
An Interview with Author and Etsy Infrastructure Chief of Staff, Lara Callender Hogan
TypeThursday sat down with Lara to discuss how fonts affect a website’s performance. It was a pleasure to speak with her.
TypeThursday is a monthly hangout to share work related to type and make new friends. Join us at:
Barcelona
Chicago
London
Los Angeles
New York City
Philadelphia
San Francisco
Seattle
TypeThursday: Lara, thanks for being here for TypeThursday.
Lara Hogan: Thanks for having me.
TT: I know you work at Etsy. Could you share with us what you’re doing over there?
LH: I’ve been at Etsy for about three-and-a-half years now. I was originally hired to run an engineering team focused on mobile web. Eventually that changed to focusing on performance. And now I’m the Infrastructure Chief of Staff at Etsy, which means that I help a number of teams within our infrastructure engineering organization do their work, make the site fast, and make it easy for us to develop lots of new features and fun stuff for all the engineers across the site.
TT: That’s awesome. I know that you have recently published a book. Congratulations.
LH: Thank you.
TT: Designing for Performance. A big theme of that book is the idea that user experience is the wedding of aesthetics with performance. Why is performance so important?
LH: Yeah that’s like my favorite question to answer, so thanks for leading off with it!
TT: Anytime!
If you have a very heavy design with lots of complex graphics or heavy page weight in terms of images, that will affect the user’s perception of the site.
Why is Performance Important
LH: So when you think about what our users experience when they visit the website or apps, it would be a combination of what they see and what they feel. What they see has everything to do with branding and intuitiveness and we talk about making things delightful. But also we can talk about feeling, right? They can feel how slow it is. Or they can feel how sluggish or how long it might take to tap or click on something or see something else change on the screen. When it comes to performance, it doesn’t just mean how long a page takes to load. It can also mean how quickly things become interactive. And all of this contributes to an overall user experience. Not just colors and brand, and it has everything to do also with the overall feel, which absolutely includes speed.
TT: Okay. So you’re saying that for the totality of the user’s experience, performance is an important consideration.
LH: Yes. And I would say that a lot of the times I hear arguments that the two things are at odds with one another, as if there’s like a versus in between design and performance, but I would argue that they absolutely can go hand-in-hand and really complement one another. Human perception of speed can go as fine as 100 milliseconds. Around 500 milliseconds, humans start to notice a lag. It’s that fine. So, yeah. Absolutely. If you have a very heavy design with lots of complex graphics or heavy page weight in terms of images, that will affect the user’s perception of the site.
TT: How do typefaces influence performance?
LH: Yeah! So typefaces, I’m going to keep on saying the word “fonts,” because we talk about fonts and font weights. I hope that that’s okay.
TT: [Absolutely.]
[Fonts] have a huge impact on the user experience, second only to images.
How Typefaces Influence Performance
LH: Thank you. So fonts are files that we load up to the website and when a user comes in a visits the website, they have to download the fonts onto their machine or onto the cache, their browser cache in order to see them rendered, right? So what that means is every time we load an individual font file, the user’s browser has to go and fetch that font file from our server and then it can start rendering the font on the page. So when I think about fonts, the size of the fonts and the number of fonts have an effect on how long the page takes to load and how quickly we see the page kind of start to take shape and actually display the font. And fonts are one of those things where it adds up very quickly. They have a huge impact on the user experience, second only to images.
TT: For people to understand the scale of what we’re discussing here. Could you give an example?
LH: That’s a great question. So the average font file served on Google Web Fonts is something like 35k, which isn’t that much, right? That’s like the size of a small JPEG. But it can be upwards of 200 or 300k, depending upon language support and character support. So when we think about font file sizes, what we’re talking about is supporting a ton of different glyphs or different characters. And the thoroughness of your character support will have a huge impact on how large the file size is.
TT: If it’s a very simple typeface project, it won’t have much of an impact, but if it’s these more complicated typefaces with multilingual support and other Open Type features, it will cause basically a bloat in the font file.
LH: Yeah and additionally, let’s say you have a typeface just used for four letters on a page. You have a very small logo and it just has four characters in it. That would be an extremely tiny font file, which is wonderful. That’s what we would hope for. Or you could compare and contrast that with actually just rendering as an SVG, which could have a smaller file size. If you’re trying to support lots of different languages, or let’s say you’re using a typeface to provide icon support, you’re using a font for an icon, those can get really bloated really fast.
TT: That’s super cool. How can designers better take performance into consideration when they’re making design decisions?
Ways to Improve Performance
LH: So the first thing to be aware of is that Internet Explorer does some really ridiculous things when it comes to downloading fonts. If Internet Explorer IE8 or below sees a font file called in the CSS document, it’s going to just go ahead and download it, whether or not that’s actually even used in the page. And newer versions of IE with compatibility mode turned on also do the same thing. So just remember that even if you’re not using the font on the page itself, if you’re just calling it in the CSS file, users of IE will experience some pretty poor loading times. So definitely limit the number of fonts that you include.
Secondly, weigh aesthetics and performance. At Etsy, we used to have a listing page that had eight different font weights of Guardian included. It got so heavy. And that meant that every time a user loaded the page, the browser had to go and fetch all eight files, which, frankly, it takes a long time because most of this can’t be happening at the same time. It depends on how the browser’s working and what else has been loaded on the page. It’s a very poor user experience.
What the designers ended up doing was they took a look at how we’re using each of those font files and whether they could start to condense or combine the usage of different weights. They ended up narrowing it down to just two different weights of Guardian for headlines and display, and then one for body copy. And this means that we’re down from 8 to just 3 and we took additional steps to minimize the font file sizes as well, by going back to the original foundries and asking them for much more lightweight versions of the font files to use, optimized font weights.
TT: So you’re saying that, to summarize, more tight design decisions to consider font choices intentionally?
Any performance work that you can do will help clarify the point of the page or the patterns that get repurposed.
Performance and Aesthetics Can Work Together.
LH: Absolutely. I would say also it helped not just with performance overhead, but also helped with some of our branding overhead. Because we were using so many different font weights at different scales with abandon, it made it really hard for designers to build out new product pages or new features and to understand how they were supposed to be using any of our typefaces. There wasn’t any consistency across the site or across our different platforms, including Android and iOS. So by combining and condensing the way we use weights and the scale for all of our fonts, two designers ended up creating a new pattern for people to use. That way people using a style guide internally are able to build out anything new and revise all sorts of old pages to adhere to the new pattern for again consistency and branding, but also definitely for performance.
TT: It’s like what you said earlier that performance and aesthetics don’t have to be antagonistic towards each other. They actually can serve a purpose together.
LH: I would say in general any performance work that you can do will help clarify the point of the page or the patterns that get repurposed. All that stuff makes such a good user experience, but also, frankly, saves you a lot of brain work when it comes to creating new stuff.
TT: This has been a great conversation, Lara. Thank you so much for your time.
LH: Yeah. Absolutely. Thank you!
Our special seasonal exhibition is coming up! Come meet fellow type lovers, learn something new, and attend exhibition of Long Island Calligraphy, Lettring and Type Design. RSVP to attend.
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
