From the course: CSS: Variable Fonts
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Variation: Width
The second registered variation axis is width and it describes how condensed, or extended, so narrow or wide, the letter form can be. It's important to note here that we're not merely stretching the typeface. This width variation actually changes the typeface to take up more or less space along the width axis. The width variation axis takes any number from zero and up, and the normal, or default value, is 100 as in 100%. Therefore, any number below 100 can be considered x% of the normal width, and any number above considered x% above the normal width. You can control the width axis using the font stretch property, and provide the number as an actual percentage, so right now it's set to font stretch 100%. If I bring it down to, say, 75, the width variation is set to 75, et cetera. The font stretch property is a bit poorly named but that's because it was introduced long before variable fonts. And for static fonts, it does…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.