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:
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:
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.