Variable Fonts
lastmod 2023-03-07created 2023-03-072 edits
The variable fonts that UI developers used to know were fonts whose text size grows or shrinks with the browser ratio using em and rem units, but variable fonts here mean something different.
Variable fonts are an evolution of the OpenType font specification, developed jointly by Adobe, Apple, Google, and Microsoft, that can combine many kinds of fonts into a single file instead of the traditional approach of using a separate file for each width, weight, and style of a font. Variable fonts are also called OpenType Variable Fonts.
Each variable font has various axes such as width, weight, and slant, and you can adjust these axes numerically to specify and combine the styles you want.
For example, Amstelvar, a well-known variable font, has three axes in total: width, weight, and optical size, and by adjusting the weight axis as below you can specify a total of 200 font styles.