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

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!

Overview: 100 Days Of More Or Less Modern CSS