Overview
-
Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.
Syllabus
-
Introduction
- Welcome
- What you should know before watching this course
- Using the exercise files
- Using challenges
- 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
- 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
- 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
- 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
- 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
- Next steps: The future of responsive typography
