CSS: Variable Fonts

CSS: Variable Fonts

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 02m | 192 MB

Digital typography has long promised dramatic flexibility, but only delivered it in part. Yes, fonts that change size have become ordinary, and we’ve learned to expect multiple variations in a family, but precisely specifying blends has remained difficult. New fonts and a new CSS specification are changing this, though, letting developers specify many axes beyond font size. It’s now much easier to create attractive and varied pages, using only a single font as the base. In this course, Morten Rand-Hendriksen demonstrates how to use variable fonts to make designs pop while preserving efficient use of bandwidth. Explore the basics of variable fonts—which allow you to download one font file and vary it as required—as well as how to use them in practice and support backwards compatibility.

Topics include:

  • What are variable fonts?
  • The weight, width, slant, and italic variation axes
  • Creating custom variation axes for variable fonts
  • Adding a variable font
  • Using the font-variation-settings property
  • Using custom properties for easier styling
  • Designing typography in the browser
  • Providing fallback fonts for older browsers
Table of Contents

1 Variable fonts An introduction
2 What are variable fonts
3 Some examples of variable fonts
4 The variation axis
5 Variation Weight
6 Variation Width
7 Variation Optical size
8 Variation Slant
9 Variation Italic
10 Use browser tools to discover axis
11 Custom variation axes
12 Add a variable font
13 Style variable fonts using old properties
14 Use the font-variation-settings property
15 Interplay between variation axes
16 Use custom properties for easier styling
17 Design typography in the browser
18 Current browser support
19 Providing proper fallbacks
20 Thanks, that was fun