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
Author(s): Jason Pamental
Edition: First Edition
Publisher: O'Reilly Media
Year: 2014
Language: English
Pages: 86
City: Sebastopol
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
