O'Reilly logo

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

Responsive Typography

Responsive Typography

by Jason Pamental
Publisher: O'Reilly Media, Inc.
Release Date: September 2014
ISBN: 9781491907085
View table of contents
Start reading

Book Description

Get the most out of typography in your web applications, and understand why typography is a critical component of Responsive Web Design. With this practical book, designers and 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. For typography to be truly responsive, it must be Performant, Progressive, Proportional, and Polished. This book will show you how to get there.

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