Interactive fonts design

by | Nov 3, 2021 | Web/App Development | 0 comments

Taking the use of text even further, some designers have been finding creative ways to make their text move and play with the user’s mouse. An easy way to make text interactive is by applying a hover-state change like you would with a button. It helps that it’s now easier to create more elaborate effects using modern no-code platforms than it used to be to try to write these interactions by hand. When employing interactivity onto fonts, it’s important to keep legibility in mind as some people are distracted by moving characters.

The website for Dillinger uses a font that changes weight when the cursor hovers over the text. Note that the text shrinking against the black background makes the selected text more legible, a great addition for usability. The exaggerated cursor size also makes the site feel more immersive. Designer Tim Ricks was kind enough to make a cloneable version of this site for anyone who wants to see how the effect was created.


Submit a Comment

Your email address will not be published. Required fields are marked *