Get a comprehensive guide to using variable fonts to make designs pop while preserving efficient use of bandwidth.
Overview
Syllabus
Introduction
- Variable fonts: An introduction
- What are variable fonts?
- Some examples of variable fonts
- The variation axis
- Variation: Weight
- Variation: Width
- Variation: Optical size
- Variation: Slant
- Variation: Italic
- Use browser tools to discover axis
- Custom variation axes
- Add a variable font
- Style variable fonts using old properties
- Use the font-variation-settings property
- Interplay between variation axes
- Use custom properties for easier styling
- Design typography in the browser
- Current browser support
- Providing proper fallbacks
- Thanks, that was fun
Taught by
Morten Rand-Hendriksen
