Using grade to add emphasis easily

In the past I've explored adding a medium or semi-bold weight to a link or button when hovering — it gives a little bit of additional visual feedback that this thing is going to do something when you interact with it. This is obviously very easy to accomplish in Sketch or Figma but I would instantly regret it when building this with CSS — unless I added a bunch of absolute positioning and layout hacks the change in font weight would nudge surrounding elements and create a jarring experience, especially on body copy.

With variable fonts however we now have access to the grade axis which alters the thickness of a characters stroke without affecting the overall width, spacing or kerning — perfect!

We can easily access the grade axis in CSS. Lets add a change to the grade on all anchor links on hover:

a {
    font-variation-settings: 'GRAD' 0;
}
a:hover {
    font-variation-settings: 'GRAD' 88;
}

With this added (and of course with a variable font imported) you should see a change without any layout shifts.

Support

Unfortunately the ability to edit the grade axis isn't available on all variable fonts — if you're using a font which you've purchased and are not sure try putting it through wakamaifondue and if you can tweak the GRAD axis then congrats, its available in the font.