Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Responsive Typography Techniques

via LinkedIn Learning

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
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

Taught by

Val Head

Reviews

Start your review of Responsive Typography Techniques

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.