Variable Fonts. Still a hidden gem? ??
Variable fonts are here to challenge the status quo. Offering a new dimension in #design flexibility, they're still a largely untapped resource.
What's so different about them
Variable #fonts have multiple axes (width, weight, rotation, etc.) that allows designers and devs to create a font that's unique to the project at hand.
Common axes include Italic, Optical Size, Slant, Weight, and Width, all five of which are registered (defined) in the OpenType file format specification.
However, the amazing part about variable fonts, and what makes them so unique. is that any property of a typeface’s design can be mapped to an axis—the choice is up to the type designer.
Devs can customize axis values in CSS via the font-variation-settings attribute. Designers can find axes e.g. in Figma's font style settings under "Variable font axes..."
/* here the axis "Slant" is set to -10, and "Optical Size" to 20 */
h1 {
font-variation-settings: "slnt" -10, "opsz" 20;
}
Let's talk about some of my favorites
All of them are open-source too ??
Roboto Flex
As the default for 谷歌 's Android with over 2.5 billion active users spanning over 190 countries, Roboto needs to be as flexible as possible.
领英推荐
Geist
Geist Geist is an open-source font created by Vercel . It's based on Inter and comes in mono and sans. Geist can be used for anything: as a display font, body, you name it. Devs can install it with npm i geist everyone else can just grab the .zip from here
Kablammo
This font by vectrotype isn't just another typeface – its unique 'morph' axis lets you craft eye-catching animations. A real head-turner for any project!