O'Reilly logo

Responsive Typography by Jason Pamental

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Preface

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

  • “Traditional” print-focused graphic designers
  • Web designers
  • Frontend developers

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

Web designers—many of whom don’t have a traditional design education—need 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: they’re 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.

What You Need to Know

I’ve purposely kept the required technical knowledge modest in this book. In truth, you only need basic familiarity with HTML and CSS to make use of web fonts, though a smattering of JavaScript will do wonders to finesse the experience. All the sample code is complete and commented, so you may well be able to just take the sample code, work it into your own project, and modify it from there.

What You Don’t Need to Know

All the code is kept fairly minimal, so while it will certainly make your life easier, you don’t need to know anything about any CSS preprocessors like LESS or Sass. Likewise, the JavaScript is mostly cut-and-pasted from what the font services provide, to emulate what you are most likely to encounter when working with the font services on your own. It never hurts to know more, but I’ve tried to ensure that even relative beginners can still get the most out of the examples provided.

About the Examples

The example files have been tested in a wide variety of both desktop and mobile browsers, on several different platforms and OSes. While nothing is certain in life or web development (aside from death and taxes), I’ve done my best to be sure that the code provided will give consistent results wherever you use it. The text used is generally excerpts from Moby Dick by Herman Melville, a wonderful piece of literature that is also unencumbered by copyright. It makes for much more interesting samples than paragraphs of “Lorem Ipsum,” to say nothing of how much more naturally it flows within the page.

Organization of This Book

This book is organized in two parts. Part I is focused primarily on some typography fundamentals, a brief history of the evolution of type on the web, and where typography fits in the design process. Part II is where we get into the details of implementation and the heart of what it means to make your typography responsive. While it may be tempting to jump right into the details, I do recommend at least skimming through Part I to make sure you don’t miss some of the important aspects of “why” behind the large amounts of “how” in Part II.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width
Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.
Constant width bold
Shows commands or other text that should be typed literally by the user.
Constant width italic
Shows text that should be replaced with user-supplied values or by values determined by context.

Tip

This element signifies a tip or suggestion.

Note

This element signifies a general note.

Warning

This element indicates a warning or caution.

Sample Code Repository

I’ve started a repository on GitHub with the sample pages referenced in the book, in addition to the links provided (this repository will always have the most up-to-date code). You can find it here: http://bit.ly/rt-code-repo.

Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: "Responsive Typography by Jason Pamental (O’Reilly). Copyright 2014 Jason Pamental, 978-1-491-90709-2.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at .

Safari® Books Online

Note

Safari Books Online is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of plans and pricing for enterprise, government, education, and individuals.

Members have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and hundreds more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

http://bit.ly/responsive_typography

To comment or ask technical questions about this book, send email to:

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

There are many people whom I need to thank for their help, encouragement, and input. Meghan Blanchette and Simon St. Laurent have been exceedingly patient, positive, and insightful editors. Before listing anyone else I have to mention three very good friends and cohorts here in Providence: Josh Clark, for believing I had something worth saying to the web community; Jen Robbins, whom I admire tremendously, for thinking that my typographic rants could fill a book and for introducing me to her O’Reilly family; and Coryndon Luxmoore: friend, cycling pal, cynic, and undying devotee of Arial. Probably set at 12px. Your faith has been fuel for my campaign against bad type on the Web. :)

I’d also like to thank these kind folks for their knowledge, inspiration, and passion for doing great things: Tim Brown, Jason Cranford Teague, Steve Fisher, Brad Frost, Aaron Gustafson, Allan Haley, Jeremy Keith, Jim Kidwell, Dan Mall, Ethan Marcotte, Eric Meyer, Dan Rose, Richard Rutter, Jason Santa Maria, Dan Rhatigan, Jonathan Stark, Elliot Jay Stocks, Dan Venditelli, Aarron Walter, Ken Woodworth, and Jeffrey Zeldman.

I’d also like to say a special thank you to John Giannopoulos, Ed Platz, and John Zsittnik for their amazing support, for being the first people to publish my writing about web fonts, and for generally being good friends and colleagues. A huge thank you again to Aaron Gustafson and Jen Robbins for their insightful reviews of my initial draft; they helped turn my ramblings into writing in more ways than I could imagine. Finally, I have to thank my parents and brother for inspiring me to teach (at least in my own way), and my wife Ellen and children Trevor and Phoebe for putting up with a lot of late nights, long stints away at conferences, and a near endless string of type-related puns. Your patience has perhaps been ill-rewarded, but is appreciated more than I could ever say.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required