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.