font-variation-settings

Recently I came to know about the CSS font-variation-settings property by way of the amazing Recursive font family.

So I have been thinking of different ways of utilizing it. Of course, you would need a font that has a lot of “axes” on which you can vary it. Commonly used fonts usually have just a single axis that you can interpolate on: the weight axis. But recursive supports 5 axes that you can vary and get amazing looking types. The axes are mono, casual, weight, slant and cursive.

A “conventional” way of doing this is to define some variables to control the value of different axes - of course you don’t want too many different variations, unless you are generating them programmatically for some special use-case (I might have some in mind :))

:root {
  --mono-full: "MONO" 1;
  --casl-full: "CASL" 1;
  --wght-regular: "wght" 400;
  --wght-semibold: "wght" 600;
  --wght-bold: "wght" 700;
  --slnt-medium: "slnt" -7;
  --slnt-full: "slnt" -15;
}

Then use the variation as required for each element you want to style, something like:

.header-link {
  font-family: Recursive, sans;
  font-variation-settings: var(--wght-semibold), var(--slnt-full);
}

.header-logo {
  font-family: Recursive, sans;
  font-variation-settings: var(--wght-bold), var(--slnt-full);
}

.icon-description {
  font-family: Recursive, sans;
  font-variation-settings: var(--wght-regular), var(--casl-full);
}