Responsive Typography: Using Type Well on the Web

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