Responsive Typography

Responsive Typography

by Jason Pamental
Released September 2014
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491916285

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of implementing web fonts well, especially how to get the best appearance from type without sacrificing performance on any device.

After examining typography fundamentals and the evolution of type on the Web, author Jason Pamental provides useful approaches, real examples, code, and advice for making your type performant, progressive, proportional, and polished—the primary ingredients of responsive typography.

  • Understand how type plays a vital role in content-first web design
  • Weigh the tradeoffs between self-hosting and using a font service to get the best performance for your site
  • Get your type on the screen fast by designing for Progressive Enhancement
  • Use a responsive relative scale to adjust proportions between typographic elements for any device or resolution
  • Polish your type with ligatures, kerning, and other techniques to create rich, textured reading experiences

Table of contents

  1. Dedication
  2. Foreword
  3. Preface
    1. What You Need to Know
    2. What You Don’t Need to Know
    3. About the Examples
    4. Organization of This Book
    5. Conventions Used in This Book
    6. Sample Code Repository
    7. Using Code Examples
    8. Safari® Books Online
    9. How to Contact Us
    10. Acknowledgments
  4. Responsive Typography: An Introduction
    1. Performant
    2. Progressive
    3. Proportional
    4. Polished
  5. I. A Bit of Backstory
    1. 1. On the Merits of Letters
      1. First, a Few Terms Explained
      2. Words Have Meaning, but Letters Have Emotion
      3. Remember to Be Memorable
        1. Roots, Rhythm, and Rhyme
      4. The Evolution of Type on the Web
        1. 1990s–2007: The Angry Designer Years
        2. A Step Sideways: Font-Replacement Techniques
        3. Finally: @font-face
        4. May 27, 2009: T-Day
        5. Dawn of a New Design Paradigm
      5. Font Format Finagling: Who Shows What and Where
      6. And So the Stage Is Set
    2. 2. Progressive Progress
      1. A Concise History of Font Rendering
      2. Hinting: Crib Notes for Font Rendering
    3. 3. Where Is Typography in the Design Process?
      1. There Is No “Content First” Without Typography
        1. Availability
        2. Variety (Is the Spice of Type)
        3. File Size
  6. II. Getting Started with Web Fonts
    1. 4. Buy or Borrow: The Designer’s Dilemma
      1. First Things First: Weigh the Dollars and Sense
      2. Type 101: A Font Is Not a Typeface
      3. DIY: Self-Hosting
        1. Get the Right Assets
        2. Serve Them Well
        3. Keep Current
      4. Something Borrowed (er, Rented): Using a Service
    2. 5. Performance: Get Fonts on Your Site, Fast
      1. Self-Hosting
        1. Gotchas
        2. Bonus
        3. Add the Performance and Progression Flair
      2. Using a Service
      3. Google Web Font Loader
      4. Even Faster: Load Only the Letters You Use
      5. Connecting Performant with Progressive
    3. 6. Be Progressive: Font Sizing and FOUT
      1. On Units of Measure
      2. FOUT Is Our Fault
      3. Tuning Up Your Fallback CSS
        1. Progressive Enhancement or Graceful Degradation?
    4. 7. Proportion: Make It Scale, Make It Right
      1. Out of Step and Size
      2. A More Modern Measured Scale
      3. One Size Won’t Rule Them All
      4. Hyphenation
      5. Take It from the Top
      6. Respect the White Space
      7. Implementing the Scale
      8. And so…
    5. 8. Polish: Finessing the Fine Points
      1. Start with the Details—Then Get Really Specific
        1. Little Orphan  
      2. When Is an ff Not an ff?
      3. A Hint of History
        1. What With Issues of Syntax and File Size, Why Bother?
      4. The Details, Please
      5. A Reasoned Approach
      6. One More for the Road (or the Beginning of Your Paragraph)
      7. Pulling It All Together
    6. 9. Notes, Notions, and Sending You on Your Way
      1. Dynamic Scaling: Great for Layout, Not So Great for Type
      2. Windows XP: Killing Good Typography Since 2001
        1. Don’t Turn Around—uh-oh (Just Turn a Little Bit)
        2. A Shadow Without Sunshine
        3. Clearly Off-Kilter
      3. Icon Fonts
      4. Wrap It Up and Put a Bow on It
    7. A. Web Font Services
      1. Fontdeck.com
      2. Fonts.com
      3. Google.com/fonts
      4. Adobe Typekit.com
      5. Typography.com
      6. WebINK.com
      7. Webtype.com
    8. B. Responsive Typography and Web Fonts in Email
      1. Resources
    9. Index
  7. Colophon
  8. Copyright

Product information

  • Title: Responsive Typography
  • Author(s): Jason Pamental
  • Release date: September 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491916285