Variable Font Hover By Letter

npm install lodash

This component is designed to work exclusively with variable fonts. Variable fonts are a modern font technology that allows a single font file to contain multiple variations of a typeface — these variations can be adjusted along different axes, such as weight, width, or slant, etc.

Each axis in a variable font has a minimum and maximum value, and you can interpolate between these values to create custom styles. Common axes include:

• Weight (wght): Controls the thickness of the letterforms (usually ranges from 100 to 900)
• Width (wdth): Controls the width of the letterforms
• Slant (slnt): Changes the angle of the letterforms
• Italic (ital): Also controls the slant of the letterforms
• Optical Size (opsz): Controls the size of the letterforms

These 5 axes are actually standardized, so when a font have them, they will have the names above. But, a font can have limitless custom axes too, with completely arbitrary names.

In this component, the fromFontVariationSettings and toFontVariationSettings props define the starting and ending states of the font variation. For example, using the Overused Grotesk font (which we use in this demo), we can modify the 'slnt' (slant) and 'wght' (weight) axes:

• The slnt axis ranges from 0 (up) to -10 (upright)
• The wght axis ranges from 100 (thin) to 900 (black)

An example prop therefore would be:

fromFontVariationSettings="'wght' 100, 'slnt' 0"

Always check the font's documentation to see what are the available axes and their ranges.

Important to mention that older browser versions and various environments don't support variable fonts, so make sure to check compatibility.

I highly recommend to go down the rabbit hole, it's super fun :)

• MDN Web Docs for Variable fonts
• Super cool article by ABC Dinamo