Responsive Typography

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.

Responsive Web Design in a Nutshell

Responsive Web Design (RWD) is a design and development methodology for creating websites that scale and adapt depending upon the size and capabilities of the device on which content is viewed. Content and design elements can reflow, navigation patterns can change, and images can be scaled to provide the best experience on all devices without utilizing separate sites or apps. This approach was defined and popularized by Ethan Marcotte in an article on A List Apart and in a subsequent book titled Responsive Web Design published by A Book Apart in 2011.

Ethan defined the basic concepts of RWD as including three main techniques: a fluid grid (rather than fixed-width), flexible media (that would scale with the rest of the page), and incorporating media queries to change the layout and flow based upon window or viewport size.

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

Progressive Enhancement, Explained

The term “Progressive Enhancement” refers to an approach to design and development that seeks to provide a solid, polished baseline experience for all devices, and then adds functionality and features for devices that can handle it. This differs from another common notion of “Graceful Degradation” in a very important way: it assumes that a simple baseline experience is a must, and extras should only be added when they can be viewed, rather than seeking to always push the top-line experience to all devices and simply helping them “fail better.” An example would be to include JavaScript for the page by actually writing out the link to load the JavaScript with JavaScript—so if it’s not present, the page never even tries to load it.

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.