Variable Fonts
Variable fonts are a new file format based on OpenType that allows the user to control all the design variants, called axes, all from a single font file. There’s weight, width, italic, slant and optical size. Developpers have gone far beyond these axes by creating delightful transformations such as casual, animations and even stranger effects. Apple, Adobe, Microsoft and Google all worked on the development of the format.
Designers can use variable fonts in design applications like InDesign, Illustrator or Photoshop.
They’re also wonderful to use for web site and mobile app development. Very subtle adjustments can be made to the axes for various screen dimensions.
.container h1 {
font-family: some-variable-font-family;
font-size: 5rem;
font-variation-settings: 'wght' 375;
font-variation-settings: 'opsz' 64;
font-variation-settings: 'slnt' 14;
font-variation-settings: 'ital' 1;
font-variation-settings: 'wdth' 115;
}
Optical Size demonstrates just how incredible variable fonts can be. As you set your type smaller, the optical size should be set to increase the weight, and vice versa. Impressive!
You have variable fonts on your Mac now! We can launch Illustrator to test them out.
You can read more about variable fonts.