Skip to content

Latest commit

 

History

History
4 lines (3 loc) · 809 Bytes

File metadata and controls

4 lines (3 loc) · 809 Bytes

variable-font-axes-to-mouse-position

Want to show off your variable font in an interactive way? This maps two axes of a variable font ('wght' and 'CASL') to the X and Y position of the mouse cursor, using jquery and the font-variation-settings CSS property.

You can see an example of it in use here; with my friend Lunia D'Ambrosio's variable font Cantina. It uses the weight ('wght') and optical size ('opsz') parameters and is a high contrast upright italic headline font, inspired by Italian typefaces from the 1950s (it is very nice, check it out).