Typography is Fragile on the Web

An Interview with Robin Rendle Author of “The New Web Typography”

Published in

Type Thursday

9 min readAug 13, 2016

This week for TypeThursday, we sat down with Robin Rendle. We discussed how typography on the web is fundamentally different from print due to latency in networks.

In NYC? Join us at The Type Director’s Club. Join us as we celebrate typographic excellence with TDC and share work-in-progress letterform projects.

September 22, 2016
6:00–9:30 PM
347 W 36th St #603
New York, NY 10018
RSVP for Free

TypeThursday: Robin, thanks for being here for TypeThursday.

Robin Rendle: Thanks for having me!

TT: Of course. Robin, I would love to first learn more about you. What is your background?

RR: My background is in books. I went to university to study English — that was when I started learning about design and when I just became infuriated with reading. But there was this constant problem where the words didn’t match up with the books, there was always a problem with the paper and the typefaces. And I didn’t realize it at the time, but all these frustrations have answers. So I started trying to find them. That led me down the path of learning about typography and design, so from there I went on to study information design at the University of Reading. That’s where I started learning about web design and that’s where I discovered my love for typography and the web.

[with the web] there’s a certain kind of magic in being able to manipulate things on the screen with so few dependencies.

What Robin Loves About the Web

TT: What about the web do you find the most interesting?

RR: Well, if you want to make a book then you don’t really know where to start; you need to find a printer, you need Photoshop or InDesign. You could think of these things as dependencies for making a book, and they certainly weren’t available when I wanted to learn how to design.

But with the web, all you need is a browser. You don’t need anything else. And I remember the first time I was reading Jeffrey Zeldman’s book Designing with Web Standards and where he talked about the float. I remember opening up the browser, going into the Inspector, and just moving things with float left, float right. There was a certain kind of magic in being able to manipulate things on the screen with so few dependencies. I think that’s where my love of the web comes from.

[The New Web Typography is] about what the web is, how it effects the act of typesetting, and whether we might be able to make rules for students.

The New Web Typography

TT: That motivated you to write a post called The New Web Typography,” correct?

RR: Yes! It’s an essay about what the web is, how it effects the act of typesetting, and whether we might be able to make rules for students. Looking back now, it seemed to resonate with a lot of people.

TT: I think it’s a very interesting essay. One of the main insights I gleaned from reading the essay was the idea of text being very different in networked environments like the web. In what way do you think that’s the case?

…with the web, a designer’s goal is to limit the presence of distortion.

The Role of The Designer

RR: Absolutely, but let me go back to the book format for a second. As a book designer you might think about paper and the binding as tools, as friends, but they’re really not. They interfere with the ideas of the writer in a lot of ways. For instance, the text size can be wrong, or the jacket can be ugly, or the book can be cheaply bound. There are all these opportunities for failure.

Likewise, with the web, a designer’s goal is to limit the presence of distortion. The greatest source of distortion is to be found in the tools that we use on a daily basis. Today, the most powerful source of distortion that we ignore on a daily basis is that the network is not always available to us.

A simple font loading problem has changed the very meaning of the text because the designers overestimated the reliability of the network.

TT: Can you give us some examples of when this would be a problem?

RR: Sure, so Zach Leatherman wrote a post, which is my favorite example of this, where Slate.com ran an article about Mitt Romney’s campaign. And basically the title runs: “Mitt Romney is Running for President.” And it’s in bold and that’s all it says and you can read the rest of the article. The problem is that in that instance a font is loaded incorrectly because what the text should say is this: “Mitt Romney is Not Running for President.” It’s because “not” is in italics and so what happens is the browser has to go and call that resource but sometimes that request fails. And it’s when that request fails that the text is not rendered — a simple font loading problem has changed the very meaning of the text because the designers overestimated the reliability of the network.

So this is a problem that we can solve quite easily, but a lot of the time we don’t consider that the network isn’t just a technical problem for developers. Instead, this is a design problem, something that we need to constantly think about and make systems to circumnavigate these issues.

Typography is about more than aesthetics alone.

TT: This is not necessarily just an issue of style. It actually affects the usability and understanding of the content on the web.

RR: Absolutely. This argument can be broken up into two camps: the flash of unstyled text and the flash of invisible text.

When a webpage loads we only want to show the web fonts we’ve chosen, right? We want to show the user the most perfect typography we possibly can. The smallcaps and italics and bold and all these fancy typefaces we’ve paid for, the shapes we adore. Unfortunately what this means that we ignore the distortions in the network because in order to do this we have to block the rendering of text to the screen so that we can load the fancy webfonts. Since nothing on the page is shown until we reveal the fonts, this method is often called the flash of invisible text.

The other method is the flash of unstyled text: we show a fallback set of fonts first, then once the webfonts have been successfully downloaded we switch them with the fallback.

In “The New Web Typography,” I mentioned that “the new web typography demands to be seen. Bad typography is better than none at all.” And I still think that’s the case. So long as people have access to information, that’s the most important goal for a typographer. And pretending that the font is the most important thing about typography is mischievous and sometimes dangerous for presenting information that’s very important.

In other words, typography is about more than aesthetics alone.

Making the information as fast as possible is more important than having those nice bolds and italics.

TT: In the article you gave even more nuanced methods of this. Such as where styles of the typeface may be auto styled in at first. Basically the bold or the italics will be a faux-bold or faux-italic until the actual webfont style was downloaded.

RR: This is a traditional typographers worst nightmare but it makes a lot of sense today: we load a regular typeface, say, Proxima Nova. There will be italics and bold in that text, but those are separate font files; we have to wait for that request to be resolved. And instead of hiding that text, like in the Slate.com example, what we really should do is fake them by having Helvetica in bold and italic inside the text, which by a book designer’s methods would be ghastly. It would be unforgivable to see a faux bold or faux italic in a book, but on the web, we have to make do with what tools we have.

Making the information as fast as possible is more important than having those nice bolds and italics. The same can be used for smallcaps as well, where you use uppercase characters and wait for the smallcap font to be loaded in.

CSS only allows nine variations of a font-weight… It’s one reason why we don’t see websites with complex typography.

CSS and Typography

TT: There’s certain incentives and priorities on the web that traditional typography may not harmonize with directly. I know you also talked about that related to the CSS markup for the web.

RR: It requires a lot more work, but I briefly touch upon the idea of programmatic failure and aesthetic failure. I see tools as shaping the way that we work, so that if the tool has some fault, our work has faults as well. And a lot of the time we don’t see the problem with the tools and we don’t see the problems with our work.

There are lots of problems with CSS when it comes to “programmatic failures”. So, for instance, there’s a really great series of posts by Nick Sherman about making a new font format. So that you can have a single font file and still have all the variety of various weights and widths because the browser would use that original font file as an example and interpolate all the other designs that we need. But at the moment CSS only allows nine variations of a font-weight and I think this impacts how we design. It’s one reason why we don’t see websites with complex typography.

The Differences Between Networked and Un-networked Text

TT: You wrote a lot about un-networked and network text. If typography is to honor its content, whether it is network or not great affects the typography form making.

RR: This is a really important difference between printed matter and the web, the difference between un-networked and networked text. So one of my favorite books is the Arion Press edition of Moby Dick. There’s a great article in Fonts and News about this, but the book fascinates me for so many reasons. One is just the physical heft of the object. You can’t help but feel that you’re in the bottom of a rocking ship with your crew as you’re reading it. And there’s something absolutely magic about the format of the text, the custom Leviathan typeface they cut for the book. And all the illustrations, the woodcut illustrations! There’s this magic combination that makes this book what it is. And so losing any one of those parts would seem sacrosanct. It would seem devious almost. Like you’re ruining the idea of what the book should be.

On the web, we have to kind of admit that those things aren’t as important as the text itself. Tim Brown has this really great saying, which I replicate, and also Kenneth Ormandy kind of develops on this idea as well, that basically the text is the most important thing, the actual words. And sending those words to the reader is more important than how beautiful they are.

So really when you make a print document, you don’t really have to think about hierarchy of concerns; you just give them the book. But with a website, we have to say, “Okay. This is the most important thing and if that fails, that’s it. The game’s over.” But we can have these secondary concerns, kind of like a pyramid. All these progressive enhancement features build on top of the previous assumption. And I think that’s really the core difference, this idea of progressive enhancement, of saying, “Okay. Can your browser support smallcaps? Okay. Cool. Can it support open type features? That’s great.” And that kind of goes against this idea of making the perfect Moby Dick. It goes against the traditional idea of design entirely. And I think that a lot of designers aren’t comfortable with this idea of being left without control.

Typography is difficult, beautiful, and on the web it is so very fragile

The Importance of Typography

TT: Why do you think this is an important consideration for all of us involved in making and using type?

RR: I think it’s important because there are so many points of failure when it comes to typography on the web. A website can fail to render or load or it can fail to be visible…

If our goal as web designers, a job title I use without shame, is to limit the presence of distortion then we must be honest about what role typography has to play in communication. Typography is difficult and beautiful, and on the web it is so very fragile — if more folks begin to focus on typography as a concern that effects usability, development and design then I think the art is bound to improve over time.

TT: Robin, this has been a great conversation. Thank you so much for your time.

RR: Thanks!