A short time in the past I made an animated variable font demo on Codepen. On this article I’ll clarify what variable fonts are, how they are often animated with CSS, and the way I created a respiration impact with CSS and a little bit little bit of Javascript.
See the Pen Variable font animation by Michelle Barker
(@michellebarker) on CodePen.
Introducing variable fonts
Variable fonts are thrilling new improvement in internet typography. As an alternative of a number of font recordsdata to load totally different variants of a selected font, variable fonts enable us to load all the variations from a single file. Generally it is a massive efficiency win (though the file tends to be bigger than a daily font file by itself, so it’s finest to solely use a variable font if you happen to really need it).
One font, many variations
As an alternative of a handful of font weights which are solely obtainable in multiples of 100 (e.g. font-weight: 600), variable fonts present a spread of values, all from a single file. The burden may be diverse wherever inside that vary. So font-weight: 372 is completely legitimate!
Axes of variation
Weight is simply one of many axes of variation (though in all probability the most typical one). Variable fonts can include totally different axes too. There are a variety of registered axes, which correspond to a four-letter tag:
- weight (
wght) - width (
wdth) - italic (
ital) - slant (
slnt) - optical measurement (
opsz)
These correspond to CSS properties and values:
font-weightfont-stretchfont-stylefont-stylefont-optical-sizing
Not all variable fonts include all of those axes of variation. Many include only one or two.
They can be accessed utilizing the font-variation-settings property. This property allows us to not solely alter the usual axes, however customized axes as properly. So font-weight might be laid out in two methods:
font-weight: 372;
or
font-variation-settings: 'wght' 372;
Customized axes
Customized axes present the sort designer with infinite scope for creativity! A customized axis of variation might be actually something – some, like x-height, could be pretty widespread for a typeface, however there are various extra inventive potentialities.
Customized axes may be accessed with the font-variation-settings property however, unline commonplace axes, their four-letter tag title have to be uppercase. The variable font Motion by NM Sort offers a customized axis known as house, which controls the curvture of the letterforms.
font-variation-settings: 'wght' 200, 'SPAC' 118;
Strive enjoying round with the totally different axes on this demo:
See the Pen Motion variable font by Michelle Barker
(@michellebarker) on CodePen.
Animating a variable font with CSS
font-variation-settings is animatable, and since it covers a spread of values somewhat than increments of 100, we are able to get some very nice results with easy CSS transitions or keyframe animations. The font IBM Plex Sans has two axes of variation: weight and width. The next code units a 1s looping animation of each axes:
h1 {
font-variation-settings: 'wght' 100, 'wdth' 85;
animation: breathe 4000ms infinite forwards;
}
@keyframes breathe {
60% {
font-variation-settings: 'wght' 700, 'wdth' 100;
}
100% {
font-variation-settings: 'wght' 100, 'wdth' 85;
}
}This offers the impact of our textual content respiration out and in!
See the Pen Variable font animation by Michelle Barker
(@michellebarker) on CodePen.
Alternatively, this might be a pleasant hover impact with a transition as a substitute of an animation.
Staggering the animation
As an alternative of our whole textual content animating on the identical price, it could be good to have our letterforms animate in sequence. We might wrap every letter of our textual content in a <span> and set a animation-delay on every one:
<h1>
<span>B</span>
<span>r</span>
<span>e</span>
<span>a</span>
<span>t</span>
<span>h</span>
<span>i</span>
<span>n</span>
<span>g</span>
</h1>h1 span:nth-child(2) {
animation-delay: 400ms;
}
h1 span:nth-child(3) {
animation-delay: 800ms;
}
h1 span:nth-child(4) {
animation-delay: 1200ms;
}
/* and so on...*/This might be a bit laborious to write down (though we might use Sass to assist us), and it wouldn’t be very maintainable if we determined to vary our textual content content material at a later date.
But when we don’t thoughts utilizing just a bit little bit of Javascript, there’s an ideal library known as Splitting.js that’s excellent for this!
Splitting
Splitting’s major use case is for animating textual content, though it’s additionally potential to separate grids and layouts for some cool results. To make use of it we have to embrace the library in our challenge, then set a data-splitting attribute on the component we’d prefer to animate:
<h1 data-splitting>Respiration</h1>Now the JS we have to write may be very easy:
Splitting()Splitting then splits our textual content component right into a sequence of <span>s, every with a category, a data-attribute and a customized property definition with a worth of the character index, which we are able to then entry in our CSS:
<span class="phrase" data-word="Respiration" model="--word-index:0;">
<span class="char" data-char="B" model="--char-index:0;">B</span>
<span class="char" data-char="r" model="--char-index:1;">r</span>
<span class="char" data-char="e" model="--char-index:2;">e</span>
<span class="char" data-char="a" model="--char-index:3;">a</span>
<span class="char" data-char="t" model="--char-index:4;">t</span>
<span class="char" data-char="h" model="--char-index:5;">h</span>
<span class="char" data-char="i" model="--char-index:6;">i</span>
<span class="char" data-char="n" model="--char-index:7;">n</span>
<span class="char" data-char="g" model="--char-index:8;">g</span>
</span>With the intention to create a sequential animation, we are able to use calc() to calculate the animation-delay worth for every letter from the customized property:
h1 .char {
--delay: calc((var(--char-index) + 1) * 400ms);
animation: breathe 4000ms infinite each;
animation-delay: var(--delay);
}That massively cuts down on the CSS we have to write, and signifies that we might change the textual content afterward and nonetheless have our animation work completely!
Assets
MDN’s Variable Fonts Information
MDN’s information is a good useful resource for studying about variable fonts and find out how to use them
V-Fonts
V-Fonts is a list of lots of of variable fonts, together with their variations axes and the place to seek out them. It features a combination of paid and free/open supply fonts, and is a good place to seek out samples for utilizing in demos if you happen to don’t wish to fork out massive bucks simply but.
Axis-Praxis
Axis-Praxis is a playground for experimenting with variable fonts and understanding a number of the inventive potentialities. It contains some actually attention-grabbing and artistic samples!
VariableFonts.dev
Variablefonts.dev is a challenge by Mandy Michael, who’s well-known within the CSS world for creating awe-inspiring demos with variable fonts and talking about them everywhere in the world.
