Responsive Typography Techniques

Course details

Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes. Designer Val Head shows you how to choose quality web fonts, develop a typographic scale and rhythm throughout your design, and build bulletproof font stacks. Plus, learn how to use media queries and CSS rules to keep your type looking great at any size. This course is a collection of best practices and techniques that will soon be an indispensible part of any web typesetter's toolbox.

Learning objectives
Deciding between self-hosted and hosted web fonts
Sizing your type with pixels, ems, and rems
Applying and choosing a typographic scale
Creating a font stack
Maintaining line lengths
Using media queries to set natural typographic break points
Tools for controlling type dynamically with JavaScript and jQuery

Concepts

0. Introduction

01 - Welcome
02 - What you should know before watching this course
03 - Using the exercise files
04 - Using challenges

1. Comparing and Choosing Web Fonts

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

2. Establishing Rhythm in Your Typographic System

10 - Exploring typography scale and vertical rhythm
11 - Implementing a modular scale to create typographic hierarchy
12 - Vertical rhythm with a base unit
13 - Sizing your type - Pixels, ems, and rems
14 - Applying viewport units (vh and vw) to typography
15 - Applying and choosing our typographic scale
16 - Challenge - Select and apply a different scale
17 - Solution - Select and apply a different scale

3. Creating Type Prototype Pages

18 - Setting up and populating prototype pages
19 - Testing type across browsers and devices
20 - Establishing the font stack
21 - Challenge - Create a font stack
22 - Solution - Create a font stack

4. Setting Type for Readability Across Screen Sizes

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

5. Helpful Online Tools and Scripts

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

Conclusion

32 - Next steps - The future of responsive typography