Get started with variable fonts

Variable fonts are a new font format offering unprecedented flexibility. And they are with us now.

Gingham variable font with continuous variation along width and weight axes
  • font-weight takes any integer from 1–999 (not limited to multiples of 100 as in CSS3).
  • font-stretch takes a percentage number in a range where 100% is normal, 50% is ultra-condensed and 200% is ultra-expanded.
  • font-style takes an oblique angle value from oblique -90deg to oblique 90deg.
  • font-optical-sizing is a new property taking a value of auto or none which turns on optical sizing if it’s available as an axis in the variable font.
Continuous variation along an optical sizing axis in Amstelvar



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Richard Rutter

Cofounder of @clearleft, author of @WebTypography, designer of digital things. Please patronise responsibly.