Pamental - Responsive typography: Using type well on the web

Dedicated to my darling wife Ellen, without whom I would be rudderless; to Trevor and Phoebe for always keeping me humble; and to Tristan, my constant companion on our wooded walks at sunrise.

Back in my day, all we had was the font element.

I fully realize that makes me sound like an old man, but Im not ready to chase young whippersnappers off my lawn quite yet. But the fact remains that when I taught myself how to build web pages back in the mid-90s, our design options were fairly limited. Heck, my first experience on the Web was on a text-based browser that provided me access to page upon glorious page of stark, blocky Courier. White text. Black background. 100% responsive.

When visual browsers finally hit the scene, ushering in images and the font element, we web designers finally had the opportunity to move out of monospace. Ill leave it to Jason to delve into the history of typography on the Web, but the advent of visual browsers opened the floodgates for use (and abuse) of type online. It was the desktop publishing revolution all over again: a direct assault on the sensibilities of anyone with even the slightest understanding of typography.

Over the years, weve made a lot of mistakes with web type: fonts embedded in images. Fonts embedded in Flash. Fonts embedded in JavaScript. Many of those were attempts to bypass the gridlock created by browser makers, type foundries, and the W3C, who couldnt come to a consensus on how to balance a desire for more type options on the Web while ensuring typographers got paid for all of their hard work. While they bickered, we soldiered on, looking for more accessible and maintainable ways to use more typefaces.

And while we were busy tinkering with sIFR and Cufn, eagerly awaiting the day we could abandon those hacks and have real browser support for actual font formats, an army of little black rectangles had caught a whiff of the awesome content we were serving up to desktop browsers.

Like ants at a Sunday picnic, these little black rectangles initially appeared one or two at a time. They were easily ignored, a nuisance. Nothing to take too seriously. But before we knew what was happening, that trickle turned into a flood and those little rectangles were hungry. Instead of taking a crumb here and therewhich we tossed to them with a great sense of self-satisfactionthese ambitious ants were carrying off whole deli trays and the friggin New York Times .

These little black rectangles are, of course, the surge of handheld (or at least hand-holdable) devices that have been redefining our concept of the Web almost daily. They exhibit widely variable screen sizes: from about the size of a matchbook, to ones that are bigger than an extra large pizza. They sport a plethora of pixel densities, new interaction methods, unpredictable network connection speeds, and low-powered processors that cant possibly compete with traditional laptop and desktop CPUs (not to mention a handful of different operating systems and browsers). All of these factors affect howand even whetheryour typographic choices will make it to your customers, and its a lot to take in.

Thankfully, Jason has your back. The book youre now reading is invaluable: its chock-full of useful approaches, practical code samples, and advice for dealing with typography in the age of responsive web design.

By the time you finish this brief book, youll be ready to handle pretty much any device someone may throw at you. But hopefully they wont. Devices are hard. And expensive.

There are primarily three different but related audiences for this book:

Traditional graphic designers need to know how to bring their knowledge of typography to the Web, how to find whats available, and how to use web fonts and understand technological limitations.

Web designers many of whom dont have a traditional design educationneed to understand the value of typography, what it can bring to their design, and what to watch out for when implementing web fonts.

Frontend developers are just as important: theyre often handed the job of incorporating web fonts into the site and are expected to do so successfully. Putting that first line of JavaScript or CSS in place is easy. Making sure the best methods for embedding are used, ensuring fallbacks are in place and tuned, and getting the best performance takes knowledge, time, and a bit of persistence.