Responsive Typography Techniques

Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.

Introduction

• Welcome
• What you should know before watching this course
• Using the exercise files
• Using challenges

1. Comparing and Choosing Web Fonts

• Exploring the goals of typography and responsive design
• Identifying quality web fonts
• Matching fonts to chunks of text content
• Deciding between self-hosted and hosted fonts
• Understanding how web fonts affect page weight

2. Establishing Rhythm in Your Typographic System

• Exploring typography scale and vertical rhythm
• Implementing a modular scale to create typographic hierarchy
• Vertical rhythm with a base unit
• Sizing your type: Pixels, ems, and rems
• Applying viewport units (vh and vw) to typography
• Applying and choosing our typographic scale
• Challenge: Select and apply a different scale
• Solution: Select and apply a different scale

3. Creating Type Prototype Pages

• Setting up and populating prototype pages
• Testing type across browsers and devices
• Establishing the font stack
• Challenge: Create a font stack
• Solution: Create a font stack

4. Setting Type for Readability Across Screen Sizes

• Maintaining line lengths for comfortable reading across screen sizes
• Using media queries to set natural typographic breakpoints
• Controlling line breaks for headings
• Managing flashes of unstyled text (FOUT) using web font events
• Challenge: Handling your own web font events
• Solution: Handling your own web font events

5. Helpful Online Tools and Scripts

• Previewing web type choices with the Typecast app
• Tools for previewing type and media queries: ish., Edge Inspect, and more
• Tools for controlling type dynamically with JavaScript and jQuery

Conclusion

• Next steps: The future of responsive typography