Responsive Typography: An Introduction

Ever since I began studying graphic design I’ve loved type and typography. When real web fonts started to become available, particularly with the launch of Adobe Typekit in 2009, web design changed for me practically overnight. In truth, after over 15 years designing and developing for the web, it became fun again. Great typography and typefaces can bring so much to the design of a site that it’s practically a whole new profession. But even with this quantum shift in what’s possible in web design, there persists a lack of awareness and print resources to help designers and developers navigate the new landscape. This book is meant to change that.

When I started work on this book, my intent was to create a resource for designers and developers to help them implement web fonts effectively. I certainly intended to provide some typography basics and a bit of the history of type on the web, but that was about it. What’s happened in the interim has led me to change focus a bit. My research and use of web fonts developed alongside my adoption and practice of Responsive Web Design (see the following sidebar), and after a time some significant similarities and relationships began to emerge.

These ideas started to gel into something larger than the parts—so much so that I decided it really was worth giving it a name: Responsive Typography. While it may seem like a buzzword landgrab, I think there are some very important aspects to practicing good typography in the age of responsive design, so it really does warrant the name and the consideration.

In keeping with Ethan Marcotte’s introduction of Responsive Web Design, I’m going to introduce the main tenets of good, responsive web typography as I see them—and then go into greater detail throughout the book. Truly responsive typography must be:

Performant

It’s the Web, and it’s our job to get the content to the user as fast as possible. Because type is a critical element of design, we have to find ways to deliver our design without compromising the delivery of the content:

  • Load only what you need: include fonts with consideration, and only load the weights and variants you call for in your design.
  • Choose the fastest way to serve your fonts: through a service or your own hosting infrastructure.
  • Leverage techniques to get your content on screen—fast—by including CSS that doesn’t use web fonts, and then swaps out for the web fonts once they’re loaded (like a progressively loading graphic).

Progressive

Again, it’s the Web: it should be inclusive and should follow the tenets of Progressive Enhancement. When properly implemented, 98% of the browsers used on the Web can load and render web fonts. But 100% should load your design. You can decide how best to implement this: lean toward “fallback-first” optimization, or assume the presence of JavaScript and tune for the smoothest transition:

  • Use both JavaScript and CSS methods for web font loading when possible.
  • Use “while the page is loading” CSS to speed both the rendering of content and its transition from “fallback-fast” to “@font-face polish.”

Proportional

This was one of the most significant issues I’ve seen with typography when coupled with Responsive Web Design. It’s not until the design starts to scale that you realize how important proportions are between headings and body type as screen sizes change:

  • Basic default size should be left to the OS and device, but screen size should influence the proportions of headings and navigation.
  • One scale does not serve all screens!

Polished

Design is the details, and great typography is no different. Don’t stop with just getting the fonts on the page. Sweat the details; they’re what get noticed:

  • Use helpers like Typogrify and greater care in content entry to get the right glyphs (like proper quotation marks instead of vertical hashes).
  • Tighten your letterspacing in headings. Loose letters look sloppy!
  • Take advantage of ligatures, old-style figures, and fractions. Their use will really set your design apart. Browsers mostly support these special characters, and the fallback is generally harmless.

So there you have it: Performant, Progressive, Proportional, and Polished—the Four Ps of Responsive Typography. At least that’s what has emerged so far! That’s the fascinating part: it’s not until we’re on the journey that we find all the twists and turns in the road. But that also leads us to adventures we can’t yet see, and that’s all part of the fun!

I’ve spent the past several years working with various services, experimenting widely with self-hosting and fine-tuning, and have gathered and developed a number of techniques to ensure the successful implementation of web fonts—and good typography in general—across myriad desktop, tablet, and mobile environments. Altogether it becomes not just about typography, but about truly responsive typography that works and looks attractive and appropriate wherever it may be viewed. Now I’d like to put it all in one place so others can benefit from my endeavors. As I’ve become fond of saying: it’s time to put Arial out to pasture.

Get Responsive Typography now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.