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:
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).
- Use “while the page is loading” CSS to speed both the rendering of content and its transition from “fallback-fast” to “@font-face polish.”
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!
- 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.