Day 27: the font-variation-settings property

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

Adjustable features of a variable font are called axes. You can use the font-variations-settings property to change these features by specifying the four letter axis name along with a value.

For example, the Saira variable font has two axes, weight ('wght') and width ('wdth'). This is how the font looks like by default:

This is just a test.

You can set the weight to a value between 100 and 900.

p {
  font-variation-settings: 'wght' 736;
}

This is just a test.

You can set the width to a value between 50 and 125.

p {
  font-variation-settings: 'wdth' 36;
}

This is just a test.

Of course, you can also combine them.

p {
  font-variation-settings: 'wght' 736, 'wdth' 36;
}

This is just a test.

The number and the kind of axes a font supports, depends on the font. Some have just one or two axes, others have many.

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS