Variable Fonts allow us to quickly and easily animate text on the web, something that static fonts never quite managed. In the examples below, you can see a basic navigation menu consisting of four items (Home, Fonts, Learn, and Ethos) in Appalachia on the left, and Arial on the right. As Appalachia is a Variable Font, when a user hovers over each item the browser is able to interpret between the two given weights, allowing for a smooth transition. When hovering over the Arial items, it’s seen that the browser doesn’t have a way to interpolate between the two weights, therefore going directly from the beginning value to the end.

This is a somewhat small detail, but it makes a desktop interaction feel substantially more luxurious than just having an animated underline or subtly changing the color of a links background. When putting this into practice we recommend not changing the weight of the link *too* much, we’ve found that when that step is too large it can quickly start to look and feel a little over the top.

Code snippets for both of these examples are below, you’re encouraged to use them in any project you like!*

*Provided you have a license for the variable font you’re using.