How has your expertise in user experience (UX) design informed how you approach typography? I’ve always felt that typography is central to UX design, but am constantly struck by how little consideration it’s given in UX education. Typography is overlooked in virtually every program I’ve surveyed; yet, it’s the most prevalent aspect of almost any design, site or application. I want to help develop a type curriculum for UX programs; I’m excited to be teaching web typography to educators at a three-day series of workshops next summer at the Hoffmitz Milken Center for Typography at the ArtCenter College of Design in Pasadena, California. If we don’t start making typography part of the core curriculum for designers working on the web, we’ll lose a body of knowledge that’s been hundreds of years in the making.
How will variable fonts further the field of typography in the next few years? One of the reasons typography has been so marginalized on the web has been because of file sizes and performance concerns. If you try to load too many fonts, the web page won’t load very fast, and if the web page doesn’t load fast, people leave. So, we have a whole generation of designers who have been taught that good typography means using only two weights of a typeface. And that is absolutely not true. If you look at great print design, you see many weights and variants in single layouts. While not every design needs that variety, it underscores the gap between commonly held wisdom and truly great typography.
Variable fonts are set to change that. A variable font is a single file that contains all of the width, weight, slant, optical size and other axis ranges a typeface designer chooses to include. That means loading a single file gives us near infinite variability, enabling us to design on the web with the full expressive range of a given typeface. We’ve never had anything like that before.
What are the most common mistakes you see digital designers make when it comes to typography? The ones related to the basics of paragraph structure. The relationship between font size, line length and line height are intertwined, and should all move in sync. The former impacts legibility, and the latter two have a massive impact on readability. If the lines are too close together or the line lengths are too long, it’s hard to read a single line of text to the end and track back to the beginning of the next line. If the spacing is too great or the lines are too choppy, it can likewise slow readers down. Add in centered alignment, and it becomes even harder to read, as the eye no longer has a consistent anchor to find the beginning of the next line. Cyrus Highsmith’s book Inside Paragraphs: Typographic Fundamentals is a great short read on those basics. I think all web and UX designers should read it.
What did you learn from the process of writing your book Responsive Typography: Using Type Well on the Web? One of the most important realizations was there were three audiences to keep in mind. Graphic designers have studied typography, but often don’t realize how much of that knowledge can be brought to the web. Web and UX designers are usually much more familiar with what’s possible, but often don’t have the educational background in typography. And then there are the developers. This audience is the most important, as they are the ones who will actually implement—read: finish—the design. Because it’s almost impossible to design for every screen size and content combination, developers are making design decisions all day long. It’s crucial to teach them fundamental typography so they have a better foundation to draw from when they encounter a design that’s less-than-fully thought through. Then they’ll be better equipped to make good decisions along the way.
How would you update your book today? While I think at least half of it still holds up pretty well, I am leaning towards writing something new. The biggest difference is I’m not convinced a traditional book would be the right way to go. I want to write something actually based on the web. It has always felt weird that I wrote a book on web typography that isn’t on the web, so I might do something about that.
What insights have you gained as an invited expert of the WebFonts Working Group? Besides it being a great way to get to know engineers working on the various browsers, it’s been amazing to help shape the way we’ll serve fonts in the future. We’re currently working on something called Progressive Font Enrichment. If it works as we hope it will, when you view a page on a site, only the font data needed to render that page will be downloaded. And when you go to the next page, only the glyphs that weren’t already served will be delivered. Viewing a site will be faster to start and get faster with every subsequent page view as less and less font data is needed to be served. This will be a big deal for Western language sites, and nothing short of astounding for sites in languages like Arabic, Chinese, Japanese or Korean, where the font files are measured in megabytes.
What tools do you find indispensable for your work? Evernote and CodePen, a site where you can create little web demos that are self-contained, but enable viewers to see the code, make a copy and play with it. I write a weekly newsletter on web typography, and each week, I feature a particular technique. I’ll create an example or two on CodePen so readers can see how it’s supposed to work. I even convinced Monotype to let me host the demo I created for its first variable font release, FF Meta, last year. It’s now been viewed more than 13,000 times, and I love how accessible it makes things for readers.
I also use Firefox because it has font tools that make playing around with typography in the browser incredibly simple. It’s pretty easy to teach designers how to inspect an element on a web page, use the font tools and tweak things to get the effects they’re looking for. It’s easier than writing code from scratch, and it creates a common place for designers and developers to look at something that’s more native to the medium than a Sketch or Photoshop file.
Where do you go to keep up with the latest type news? I follow a lot of type designers and other type folks on Twitter. I subscribe to newsletters like Robin Rendle’s Adventures in Typography, Nicole Arnett Philips’s Typograph.Her, Typography.Guru’s Typography Weekly and AIGA Eye on Design. I go to type-related conferences every year, like ATypI and TypeCon, though I’m hoping to go to Typographics and Kerning next year.
You’ve spoken at more than 100 conferences. How have the lessons you’ve wanted to impart to the audience changed over time? I started out talking about how and why you should use web fonts, and the best ways to do that for better performance. Then, it became more focused on typography in responsive web design, and how to adapt based on screen size. For the past couple of years, I’ve been focused on introducing people to variable fonts. And now, I’m starting to push further into how we can design more creatively for the web, using variable fonts together with a variety of other techniques. I’m trying to bring some new interpretations of classic and innovative graphic design into our digital design lexicon.
The truth is, there will always be a need for refreshers and more fundamental typography education, but unless we keep pushing forward, we’ll never inspire the next generation of designers to go further. I started my newsletter to create a place where someone can go browse the archive, pick an issue and learn a technique. That’s really the goal: to help preserve and expand the practice of good typography on the web. It’s a lofty goal, but that’s what makes it so exciting. It helps make the web a more beautiful, accessible and readable place.