Variable Fonts2:03 with Hope Armstrong
Variable fonts have dynamic axes, such as Weight, Width, Optical Size, Italic, and Slant. Let's explore!
Variable fonts are another tool you can add to your responsive toolkit. 0:00 A variable font is a single font file that behaves like multiple fonts. 0:05 This is done with axes that can be adjusted to change aspects of the font. 0:10 Common axes include weight, width, optical sizer, metallic, and slant. 0:15 A variable font can have a single axis or multiple axes. 0:22 Consolidating multiple fonts into one has performance advantage, 0:27 as the file size is smaller and more efficient. 0:31 It also allows for more variations and type styles dynamically on the screen. 0:34 One use case for this is adjusting the font depending on the reader's device. 0:41 For example, you could heighten the X height on smaller screens or 0:45 you could condense and expand character width as the viewpoint narrows and widens. 0:50 Let's see some variable fonts in action. 0:56 Foreday has the ability to adjust between serif and 0:59 sans serif designs, as well as different weights. 1:04 Divotvor oscillates between a geometric slab serif to a decorative and 1:08 ornamental font 1:14 And it can get even more experimental. 1:27 Check out this font called in the pines, which looks like branches growing. 1:30 I hope that inspired you to check out more variable fonts. 1:47 There's so many creative typographers in the world, and I encourage you to be 1:50 inspired by the fonts you can include in your next project. 1:55 I'll see you in the next video as we look into the finer details of typography. 1:58
You need to sign up for Treehouse in order to download course files.Sign up