Interactivity and Animation with Variable Fonts

24ways.org 24ways.org7 months ago in #Typography Love303

If you read Jason’s introductory article about variable fonts, you’ll understand the many benefits and opportunities that they offer in modern web development. From this point on we’ll assume that you have either read Jason’s introduction or have some prior knowledge of variable fonts so we can skip over the getting started information. If you haven’t read up on variable fonts before jump over to “Introduction to Variable Fonts: Everything you thought you knew about fonts just changed” first and then come join me back here so we can dive into using variable fonts for interactivity and animations! Creative Opportunities If we can use variable fonts to improve the performance of our websites while increasing the amount of style variations available to us, it means that we no longer need to trade off design for performance. Creativity can be the driving force behind our decisions, rather than performance and technical limitations. Cookie text effect font: This Man is a Monster, by Comic Book Fonts. My goal is to demonstrate how to create interactive, creative text on the web by combining variable fonts with CSS and JavaScript techniques that you may already be familiar with. With the introduction of variable fonts, designs which would have previously been a heavy burden on performance, or simply impossible due to technical limitations, are now completely possible. Still I Rise Poem by Maya Angelou, Demo emphasising different words with variable fonts. View on Codepen.Variable fonts demo with CSS Grid using multiple weights and font sizes to emphasise different parts of the message. View on Codepen. The tone and intent of our words can be more effectively represented with less worry over the impacts of loading in “too many font weights” (or other styles). This means that we can start a new path and focus on representing the content in more meaningful ways. For example, emphasising different words, or phrases depending on their importance in the story or content. Candy Cane Christmas Themed Text Effect with FS Pimlico Glow by Font Smith. View on Codepen. Note: using variable fonts does not negate the need for a good web font performance strategy! This is still important, because after all, they are still fonts. Keep that in mind and check out some of the great work done by Monica Dinculescu, Zach Leatherman or this incredible article by Helen Homes. Variable Fonts & Animations Because variable fonts can have an interpolated range of values we can leverage the flexibility and interactive nature of the web. Rather than using SVG, videos or JavaScript to accomplish these effects, we can create animations or transitions using real text, and we can do this using techniques we may already be familiar with. This means we can have editable, selectable, searchable, copy-pastable text, which is accessible via a screenreader. Grass Variable Font Demo Growing Grass Variable Font Text. Demo on Codepen. This effect is achieved using a font called Decovar, by David Berlow. To achieve the animation effect we only need a couple of things to get started. First, we set up the font-family and make use of the new property font-variation-settings to access the different axes available in Decovar. h1 { font-family: “Decovar”; font-variation-settings: ‘INLN’ 1000, ‘SWRM’ 1000; } For this effect, we use two custom axis – the first is called “inline” and is represented by the code INLI and the second is “skeleton worm” represented by the code SWRM. For both axes, the maximum value is 1000 and the minimum value is 0. For this effect, we’ll make the most of the full axis range. Once we have the base set…

Like to keep reading?

This article first appeared on 24ways.org. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply