Salem, MA Walnut Creek, CA Victoria, BC Centennial, CO Bournemouth, UK Vancouver, BC Montreal, QC Roseville, MN Rome, GA Peterborough, NH Oakland, CA Austin, TX Mystic, CT Saint Charles, MO Des Moines, IA Salt Lake City, UT Lander, WY Cote St Luc, QC Womelsdorf, PA Minneapolis, MN Highlands Ranch, CO San Francisco, CA Silver Spring, MD London, ON Pottstown, PA Phoenix, AZ Sacramento, CA Farmers Branch, TX Marina del Rey, CA Murray, UT Orlando, FL Paris, France Brookline, MA Los Angeles, CA San Rafael, CA San Luis Obispo, CA Atlanta, GA Tucson, AZ
Built to maximize versatility, control, and performance, Recursive is a five-axis variable font. This enables you to choose from a wide range of predefined styles, or dial in exactly what you want for each of its axes: Proportion, Monospace, Weight, Slant, and Italic. Taking full advantage of variable font technology, Recursive offers an unprecedented level of flexibility, all from a single font file.
Recursive draws inspiration from single-stroke casual signpainting, a style of brush writing that is stylistically flexible and warmly energetic. Adapting this aesthetic basis into a type system, Recursive is designed to excel in digital interactive environments. This makes the typeface ideal for a wide range of uses, including data-rich apps, technical documentation and code editors.
One font. Infinite combinations.
Recursive is crafted with adaptability and diversity in mind, offering a complete type system but ensuring that each style can pair perfectly with its siblings. With so many possible variations across its subfamilies, weights and styles, Recursive allows for a dozen of font combinations that provide enough contrast to clearly define typographic roles, while maintaining a cohesive voice.
Sans && Mono. In one file. MONO
The typeface comes in two practical and highly readable subfamilies, Sans and Mono. Thanks to its Monospace axis (MONO), both of these subfamilies can be used in a single font file. You can even select custom instances that are semi-proportional or semi-monospaced.
Of course, vertical metrics such as line height, cap height, and x-height are shared across the entire Monospace axis. This allows harmonious and performant layouts, even where different proportions are mixed, such as in data-rich applications and technical documentation.
Recursive Sans is made for text & user interface design. While its proportional characters deliver comfortable reading at text sizes, its heaviest weights are perfect to create punchy, tightly-spaced headlines.
Recursive Mono is made for code. Its characters share the same width for clear legibility and perfect alignment. This is particularly helpful for use in programming and data-heavy design tasks, but also allows for creative possibilities in display typography.
A Sans for more robust layouts.
The characters within both subfamilies, Sans & Mono, maintain the exact same width across all font styles, independently of the values set on the Weight, Casual, Slant, and Italic axes. You can therefore use Recursive to create animated font transitions without breaking the layout of UI elements like menus and buttons.
Menu Item
Item Two
Choose Me
font-family: sans-serif;
Menu Item
Item Two
Choose Me
font-family: Recursive;
Ready for work. Ready for play. CASL
Recursive uses its Casual axis (CASL) to offer a range of personality, allowing you to get just the right tone for any context. Along this axis, letterforms adjust in stroke curvature, contrast, and terminals to go from a sturdy, rational Linear to a friendly, energetic Casual. All the styles along this axis are designed to maintain high legibility at medium and text sizes. In display sizes, it is most effective to use either end of the Casual axis.
Linear (CASL 0) styles have subtly-flattened edges and simple, open forms. This optimizes readability and enables enhanced focus in dense information, such as long-form text and complex code.
Casual (CASL 1) echoes the soft & curvy brush strokes of casual signpainting, but simplifies these forms for a striking and inviting tone. This makes it ideal for web headlines, code snippets, and command line interfaces.
Light to ExtraBlack. And everything in between. wght
Recursive comes in a wide range of weights, from Light (300) to a super-heavy Black (900). You can choose from its seven predefined weights, or set a custom value through its Weight (wght) axis. And because Recursive maintains consistent letterforms along the entire Weight axis, it allows for smooth animations between any of its different weights.
Slant and Italics. Two axes that work great together, or separate. slnt & ital
In Recursive, italics and slant can be controlled separately. The Italic axis (ital) lets you switch on true italics, while the Slant axis (slnt) defines the angle of the letters. This makes it possible to use sloped romans ( slnt -15, ital 0), upright italics ( slnt 0, ital 1), or set custom values on both axes for more options to play with.
Recursive’s true italics (ital 1) replace familiar letterforms with single-story cursive alternates. By default, Recursive will automatically apply these cursive alternates when setting the Slant axis (slnt) to a high value. This ensures that your code and text reads beautifully and instantly, no matter how slanted it needs to be.
Powerful, yet simple to use.
As a variable font, Recursive gives you fine-grained control over each one of its styles. However, it also comes with 64 predefined styles that are easy to access through your font menu. Called named instances¹, these work just like regular static fonts do.
¹ Named instance: a predetermined location in the designspace of a variable font, similar to the “static instances” that are familiar in traditional digital fonts.
Recursive
Light (300)
Regular (400)
Medium (500)
Semibold (600)
Bold (700)
ExtraBold (800)
Heavy (900)
ExtraBlack (1000)
Supports over 200 languages.
To meet the needs of global communication, Recursive supports a wide range of Latin-based languages, including Vietnamese. It also comes with an extended set of currencies, symbols, fractions, and arrows.
Variable color fonts, how do they work? What can you do with them? Are they going to change the web? Well I don’t know all answers, but I’ll give you an initiation. I hope this tiny guide, combined with links to pieces written by people much smarter than me, will clear up some things!
As variable color fonts are fairly new, there is much to explore. What are the limits, how do browsers handle them? And as fonts can become much more than just letters, the adventure doesn’t end at the ‘A to Z’. So scroll along, and if you want to give it a go yourself, at the end you find an asset pack which includes font files and an example webpage!
Want to create typefaces? Glyphs offers a free trail and many tutorials: www.glyphsapp.com
About fonts
In basic terms, fonts are little else than vector drawings, drawn on small artboards, each assigned to unicodes (universal markers). It’s this which allows you to type a letter with your keyboard! Of course there are other things included in a font such as the spacing, but it’s the vectors that makes it exciting. This way a typeface can be scaled indefinitely, but it also allows you to draw anything you would like!
So drawing the paths, I created illustrations instead of letters, which made the perfect subjects for variable color font experiments.
About variable fonts
To be able to transform, variable fonts use a method called interpolation, which automatically creates new instances of a letter between two existing drawings. For this, both drawings have to consist of exactly the same amount of points and handles, as you can’t interpolate into the void!
Normally, the designer chooses a certain weight or position to interpolate into a final (static) design, but with a variable font, this interpolation becomes fluid, which the user can adjust. With a variable font both you will be able to change shape in static and dynamic media, opening up possibilities for dynamic typography.
Color fonts merge layers into a single font file, and allows you to assign a color to each layer. There are various techniques and formats for color fonts, as each operating systems and brower has a preference. But for a variable color font, Microsoft’s CPAL/COLR system is required, as the other formats are incompatible with the interpolation. You can tweak each color layer, giving them the RGB value you would like and even assign alpha values. One of the most useful things is the ability for layers to overlay, allowing you to mask elements of the illustration/letter.
With your variable font transformed to CPAL/COLR layers, You can assign your variables to an axis (such as width, weight, or your own invention), and can add a value to these axis, allowing you to have control over each transformation, up to the decimal.
Now you just have to export it! Glyphs can’t export variable color fonts into webfonts, so you will have to export it as a normal variable font first, and afterwards convert it into a WOFF2 file. For this you can use one of the many online converters.
Letting your browser do the moving
Only usable (currently) for the web, variable color fonts can be added to on your pages with just a few lines of css and a woff2 font file. Compared to SVG’s, variable color fonts allow little customisation, but are easier to implement. When loaded on your page as a variable font, you are able to animate the font, or use other input, such as browser size, microphone, camera or gyroscope to adjust the variables.
Not all browsers support variable color fonts in the same way: Some may render the characters incomplete, or create a pixelized preview. Currently Safari has the best support, keeping the visuals sharp while also allowing it to animate without errors. (other known browser errors include visual cut-offs or not loading the font’s color palette).
While color fonts and variable fonts are supported by program’s such as Adobe Illustrator and Photoshop, variable color fonts are not. These programs will only show a placeholder character when loaded. Although this character will be variable, the color table will be inactive.
What the future will bring
The tech is new, the adventure big! The surface of what’s possible hasn’t been scraped yet, so let’s continue this adventure together! Have a go with the asset pack, and hope this condensed writeup was of help! If you have questions, feel free to reach out by mail, or contact me on twitter.
And of course some thanks I would have never been able to make headway into the world of Variable Color Fonts without the great tutorials by Rainer Erich Scheichelbauer.
And my Variable Color Fonts would never have seen any real use if it wasn’t forMandy Michael’scool experiments, which showcase variable fonts interacting with browsers, and other output/input.
While I was at ATypI Tokyo a couple weeks ago, Google had some big announcements (I covered those a bit last week). The new version of their API was particularly great to hear, as this marks the first support for using variable fonts on their platform. It’s a small set of typefaces, but there is some nice variety and what they have is really well done. There are 10 typefaces in all, with a selection of serifs, sans, rounded, slab, and monospace. Two of the serifs have italics as well, making them an interesting experiment for body copy usage. I created an example page that we played around with a bit in my workshop last week, and included it live in my talk, both at Web Unleashed in Toronto.
A sample page on CodePen loading Hepta Slab and Crimson Pro as variable fonts from Google Fonts’ new API
I’ve now created a demo on CodePen as well, and will walk through the setup here with a few examples. As the launch announcement page states, the syntax is pretty strict, but it didn’t take long to get up and running with it, and now it’s feeling pretty snappy.
Here are all the different variable fonts you can play with for now
In going through the announcement it’s clear that this will eventually be how all the fonts are served, not just specifically variable fonts. You can still request a single weight of a font, like so:
You can see that the font-family attribute/value pair is the same, but the way you specify weight and italic is a little different. Here’s the current syntax:
/css?family=Roboto:700
You’ll note that whereas the original syntax just expected a weight value (in this case 700) after the family name, now you’re specifying ‘wght’ and supplying a value. This is so when requisition a variable font, it’s now possible to specify an axis (or more than one), and then supply a second set of values after the ‘@’ sign. Multiple weights can be requested too:
/css2?family=Roboto:wght@400;700
Note that the weight values are listed after the ‘@’ sign separated by semicolons. If you wanted to add italics, you have to specify each combination:
/css2?family=Roboto:ital,wght@0,100;1,100;1,700
This will get you Italic and weight combinations of ‘upright 100’, ‘Italic 100’, and ‘Italic 700’.
Now for the variable fonts. To get Crimson Pro with a weight axis (with a range of 200 to 900), you would request it like this:
/css2?family=Crimson Pro:wght@200..900
Note that this time the values after the ‘@’ sign are separated by ‘..’ which indicates that this is a range, not two separate values. When requesting Italics as well as upright, you have to indicate the axes and ranges requested for each:
You can then work with the fonts just as you would if you were self-hosting, and be confident that the family grouping will be working properly as well.
p {
font-family: ‘Crimson Pro’, Georgia, serif;
font-weight: 350;
}
Thus, with the code above any text in a paragraph would be set in Crimson Pro, and bold would be properly bold, and Italic actual Italics.
The sample page shows a nice range of weights in the Hepta Slab-set headings, and regular and a slightly bolded italic in Crimson Pro
Have a play around with the demo, and try swapping in some of the other fonts they have available. Don’t forget to send a tweet to the @GoogleFonts team and let them know you’re interested. Public support goes a long way. And if you spot any issues, you can log them over on GitHub.
There’s been a ton of great stuff flying around about variable fonts lately (our tag has loads of stuff as well). I thought I’d round up all the new stuff I hadn’t seen before.
Speaking of Google Fonts, Recursive is pretty lovely and will be coming to Google Fonts. It even has a little playground for its variable possibilities.
The annual release of the new default WordPress theme (“TwentyTwenty”) will be done by Anders Norén. It’ll be a rejigger of Chaplin and be all ready to have cool Gutenberg blocks. The font will be Inter, which is lovely and, of course, a variable font. The screenshots look great.
Here’ a nice demo of a slider UI where the active slide has beefy thick font that animates to a thin variant on non-active slides. I still love the look of animating font weight, like this Marvin Visions site and Michelle Barker’s Breathing.
There is something about variable fonts that gets people in a weird mood (just look at Mandy Michael’s demos). But usually, the experiments are still typographic in nature. Not so with Typearture, where the demos are planes and cars and trucks and pigs and all sorts of weird stuff that is blowing minds. Like this galloping horse!
Remember that Wakamai Fondue (the best name ever for a site) is great at unearthing the technical possibilities of a variable font.
Visual demo of variable fonts interpolated in WebGL.
Grammato has a pretty bold proclamation of being a next-generation of typography. Not handwritten or a handwriting-font, but a handwriting-esque font that leverages variables fonts to somehow do its thing. Not sure I totally get it, but the site is nice.
Saved the most fun font for last: This Man This Monster from COMICRAFT is super cool looking and has unusual variable font variables: Bite, Chew, and Wonk (as opposed to the normal stuff you see, like weight and slant).
As prescription eyeglasses achieve proficiency for persons with short-sightedness, Lexend employs variable font technology to prescribe a personalized axis setting according to the Shaver-Troup Formulations.
The word is the condition for reading. The word consists of both white and black forms in rhythm units. If the rhythm is weak; the word is poorly formed. If the rhythm is absent; there is no word. Reading is a spatial manner of intervals in both length and breadth…. Ignoring the white by pedagogy places civilization at risk. What is civilization if not the cultural community dependent on reading?
My name is Commander Smith and the spaceship that I command has been exploring the planet known as Earth for almost a year. We have discovered that Earth is very different from our planet. Our next job was to explore the states of Texas, New Mexico, Arizona, and Nevada. These states make up the Southwest region.
First, we had to backtrack a little and fly east to Texas. This is a huge state— the map showed that it was more than seven hundred miles wide. Later we found out that Texas is the second largest state in size, after Alaska. It is also the second largest state in population, after California. We certainly saw a lot of really big things in Texas— big cities, big oil fields, and big ranches. In fact, we found out that there is a ranch in Texas that is bigger than the whole state of Rhode Island! Texas raises more cattle than any other state. The cowboy, a person who takes care of the cattle, is a symbol of Texas. In the late 1800s, Texas cowboys drove the cattle hundreds of miles to market in the northern states.
It was hard, dangerous, adventurous work, so many people thought of cowboys as heroes. Over time, the cattle ranches changed so that there was less need for cowboys. Today, there are not as many cowboys in
Texas. There are, however, many Texans who still dress like cowboys. They wear cowboy boots and a kind of tall cowboy hat they call a ten- gallon- hat because it looks as if it could hold that much water. Another symbol of Texas is the oil well. Texas produces more oil than any other state. Oil was first discovered near the city of Houston in the early 1900s.
Today, Houston is the largest city in Texas. The American space program has one of its largest workplaces there. One man told us that Houston was the first word spoken on the moon. He explained that when an American became the first human to land on the moon on July 20, 1969. The first thing he did was radio back to Houston. The United States was the first manned mission to land on the Moon. There have been six manned U. S. landings and numerous unmanned landings. To date, the United States is the only country to have successfully conducted manned missions to the Moon, with the last one in December 1972.
Time to read0ms
Words read0
Errors0
Words Correct per Minute0
WCPM
Reading-Proficiency is measured in fluency.
There is a consensus that reading fluency is one of the defining characteristics of good readers, and a lack of fluency is a common characteristic of poor readers.
Differences in reading fluency not only distinguish good readers from poor, but a lack of reading fluency is also a reliable predictor of reading comprehension problems. Once struggling readers learn sound-symbol relationships through intervention and become accurate decoders, their lack of fluency emerges as the next hurdle they face on their way to reading proficiency.
This lack of fluent reading is a problem for poor readers because they tend to read in a labored, disconnected fashion with a focus on decoding at the word level that makes comprehension of the text difficult, if not impossible.
A student reads a story with 409 words in 1m 24s. She made 0 errors. To determine WCPM (Words Correct Per Minute):
Count the total number of words.
409 words
Count the number of mistakes.
0 mistakes
Take the number of words minus the number of mistakes = number of words read correctly.
409 words - 0 mistakes = 409 correct words
Convert the time it took to read the passage to seconds.
1m 24s to read = 84s
Convert the number of seconds to a decimal by dividing the number of seconds by 60. This is the total reading time.
84s / 60 = 1.4 total reading time
Divide the number of words read correctly by the total reading time in decimal form.
409 / 1.4 = 292 Words Correct per Minute (WCPM)
The Shaver-Troup Formulations
As an Educational Therapist, Dr. Bonnie Shaver-Troup observed that reading issues masked the individual’s true capability and intelligence. Shaver-Troup theorized that these issues were a sensitivity to typographical factors. She began manipulating multiple text factors to find a match between text format and an individual’s optimized visual processing capabilities.
In clinical practice with both children and adults, Dr. Shaver-Troup used a fluency test to measure the effectiveness of the solution. Test results supported her theory; making the modifications to typography allowed the reader to instantaneously improve Words Correct per Minute (WCPM) scores, which research correlates to increased comprehension.
The Shaver-Troup Formulations Examined
Three factors were manipulated in increasing intensity. These factors were:
Hyper expansion of character spacing
Expanded font-outline shapes
Sans-serif font to reduce noise
The Demonstration of Effectiveness
20 third graders, eight males and twelve females, read for one minute in five fonts.
All text was set at 16pt and the reading materials were two grade levels above the participants current grade level to ensure the typography was being measured, rather than reading competency.
Each student read out loud a passage set in a control of Times New Roman, then four of the Lexend Series — Regular, Deca, Mega, and Giga.
regulardecamegagiga
My name is Commander Smith and the spaceship that I command has been exploring the planet known as Earth for almost a year. We have discovered that Earth is very different from our planet. Our next job was to explore the states of Texas, New Mexico, Arizona, and Nevada. These states make up the Southwest region.
First, we had to backtrack a little and fly east to Texas. This is a huge state— the map showed that it was more than seven hundred miles wide. Later we found out that Texas is the second largest state in size, after Alaska. It is also the second largest state in population, after California. We certainly saw a lot of really big things in Texas— big cities, big oil fields, and big ranches. In fact, we found out that there is a ranch in Texas that is bigger than the whole state of Rhode Island! Texas raises more cattle than any other state. The cowboy, a person who takes care of the cattle, is a symbol of Texas. In the late 1800s, Texas cowboys drove the cattle hundreds of miles to market in the northern states.
It was hard, dangerous, adventurous work, so many people thought of cowboys as heroes. Over time, the cattle ranches changed so that there was less need for cowboys. Today, there are not as many cowboys in
Texas. There are, however, many Texans who still dress like cowboys. They wear cowboy boots and a kind of tall cowboy hat they call a ten- gallon- hat because it looks as if it could hold that much water. Another symbol of Texas is the oil well. Texas produces more oil than any other state. Oil was first discovered near the city of Houston in the early 1900s.
Today, Houston is the largest city in Texas. The American space program has one of its largest workplaces there. One man told us that Houston was the first word spoken on the moon. He explained that when an American became the first human to land on the moon on July 20, 1969. The first thing he did was radio back to Houston. The United States was the first manned mission to land on the Moon. There have been six manned U. S. landings and numerous unmanned landings. To date, the United States is the only country to have successfully conducted manned missions to the Moon, with the last one in December 1972.
Time to read0ms
Words read0
Errors0
Words Correct per Minute0
WCPM
The p value in this experiment (0.014) says the chance of the results presented happening by random was 1.4%. In statistics, a result is considered significant if it’s below 5%.
00/00
had better scores with Lexend over Times New Roman
0
had the best score with Times New Roman
0
had the best score with Lexend Regular
0
had the best score with Lexend Deca
0
had the best score with Lexend Mega
0
had the best score with Lexend Giga
000
Avg WCPM for Times New Roman
00.0
Avg Improvement in WCPM
A Virtue of Variable Font Technology
As the study demonstrates, while the Lexend series were beneficial to a large sample of students, no one setting worked best for all students. Diverse readers need different axis settings like people require different eyeglass prescriptions.
Eyeglass prescriptions are not six strict settings. There are more granular settings possible.
Variable font technology allows for continuous selection of the Lexend Series to find the specific setting for an individual student.
My name is Commander Smith and the spaceship that I command has been exploring the planet known as Earth for almost a year. We have discovered that Earth is very different from our planet. Our next job was to explore the states of Texas, New Mexico, Arizona, and Nevada. These states make up the Southwest region.
First, we had to backtrack a little and fly east to Texas. This is a huge state— the map showed that it was more than seven hundred miles wide. Later we found out that Texas is the second largest state in size, after Alaska. It is also the second largest state in population, after California. We certainly saw a lot of really big things in Texas— big cities, big oil fields, and big ranches. In fact, we found out that there is a ranch in Texas that is bigger than the whole state of Rhode Island! Texas raises more cattle than any other state. The cowboy, a person who takes care of the cattle, is a symbol of Texas. In the late 1800s, Texas cowboys drove the cattle hundreds of miles to market in the northern states.
It was hard, dangerous, adventurous work, so many people thought of cowboys as heroes. Over time, the cattle ranches changed so that there was less need for cowboys. Today, there are not as many cowboys in
Texas. There are, however, many Texans who still dress like cowboys. They wear cowboy boots and a kind of tall cowboy hat they call a ten- gallon- hat because it looks as if it could hold that much water. Another symbol of Texas is the oil well. Texas produces more oil than any other state. Oil was first discovered near the city of Houston in the early 1900s.
Today, Houston is the largest city in Texas. The American space program has one of its largest workplaces there. One man told us that Houston was the first word spoken on the moon. He explained that when an American became the first human to land on the moon on July 20, 1969. The first thing he did was radio back to Houston. The United States was the first manned mission to land on the Moon. There have been six manned U. S. landings and numerous unmanned landings. To date, the United States is the only country to have successfully conducted manned missions to the Moon, with the last one in December 1972.
Time to read0ms
Words read0
Errors0
Words Correct per Minute0
WCPM
At the end of the 2018 project, Thomas identified research by Dr. Nadine Chahine on reading proficiency in Arabic. The conclusion and implication of her research support the reasonable proposal to apply the Shaver-Troup Formulation into an Arabic variable font.
Aspects of hyper-extension are already familiar in Arabic. The lengthening of text for justification is named kashida which can aid in legibility:
The kashida is used to give a better character layout on the baseline, and to lessen the cluttering at the joint point between two successive letters of the same word
Mohamed Jamal Eddine Benatia,Mohamed Elyaakoubi and Azzeddine Lazrek Source
Working with Dr. Chahine and financial support from Google, the Lexend team wishes to investigate if the Shaver-Troup Formulations applied to the Arabic script has the same beneficial fluency properties as we have demonstrated in the Latin script. If proven true, the implications are the following:
A richer understanding of human perception that is cross-cultural in scope
Demonstration of evidence-based design practices in regard to legibility
A contribution to expanding reading-proficiency around the world
h1, p { font-variation-settings: 'LXND' 100; }
An illustration of potential for using this concept for Arabic typography
Stay Connected
For updates when Lexend will be available on Google Fonts, news on original research, and to contribute, sign up to Thomas Jockin’s Lexend newsletter.
A little while ago I made an animated variable font demo on Codepen. In this article I’ll explain what variable fonts are, how they can be animated with CSS, and how I created a breathing effect with CSS and a little bit of Javascript.
Introducing variable fonts
Variable fonts are exciting new development in web typography. Instead of multiple font files to load different variants of a particular font, variable fonts allow us to load all of the variations from a single file. In most cases this is a big performance win (although the file tends to be larger than a regular font file on its own, so it’s best to only use a variable font if you actually need it).
One font, many variations
Instead of a handful of font weights that are only available in multiples of 100 (e.g. font-weight: 600), variable fonts provide a range of values, all from a single file. The weight can be varied anywhere within that range. So font-weight: 372 is perfectly valid!
Axes of variation
Weight is just one of the axes of variation (although probably the most common one). Variable fonts can come with different axes too. There are a number of registered axes, which correspond to a four-letter tag:
weight (wght)
width (wdth)
italic (ital)
slant (slnt)
optical size (opsz)
These correspond to CSS properties and values:
font-weight
font-stretch
font-style
font-style
font-optical-sizing
Not all variable fonts contain all of these axes of variation. Many contain just one or two.
They can also be accessed using the font-variation-settings property. This property enables us to not only adjust the standard axes, but custom axes as well. So font-weight could be specified in two ways:
or
font-variation-settings: 'wght' 372;
Custom axes
Custom axes provide the type designer with infinite scope for creativity! A custom axis of variation could be literally anything – some, like x-height, might be fairly common for a typeface, but there are many more creative possibilities.
Custom axes can be accessed with the font-variation-settings property but, unline standard axes, their four-letter tag name must be uppercase. The variable font Movement by NM Type provides a custom axis called space, which controls the curvture of the letterforms.
font-variation-settings: 'wght' 200, 'SPAC' 118;
Try playing around with the different axes in this demo:
Animating a variable font with CSS
font-variation-settings is animatable, and because it covers a range of values rather than increments of 100, we can get some really nice effects with simple CSS transitions or keyframe animations. The font IBM Plex Sans has two axes of variation: weight and width. The following code sets a 1s looping animation of both axes:
This gives the effect of our text breathing in and out!
Alternatively, this could be a nice hover effect with a transition instead of an animation.
Staggering the animation
Instead of our entire text animating at the same rate, it might be nice to have our letterforms animate in sequence. We could wrap each letter of our text in a and set a animation-delay on each one:
This would be a bit laborious to write (although we could use Sass to help us), and it wouldn’t be very maintainable if we decided to change our text content at a later date.
But if we don’t mind using just a little bit of Javascript, there’s a great library called Splitting.js that is perfect for this!
Splitting
Splitting’s primary use case is for animating text, although it’s also possible to split grids and layouts for some cool effects. To use it we need to include the library in our project, then set a data-splitting attribute on the element we’d like to animate:
<h1data-splitting>Breathingh1>
Now the JS we need to write is very simple:
Splitting then splits our text element into a series of s, each with a class, a data-attribute and a custom property definition with a value of the character index, which we can then access in our CSS:
V-Fonts is a listing of hundreds of variable fonts, including their variations axes and where to find them. It includes a mixture of paid and free/open source fonts, and is a great place to find samples for using in demos if you don’t want to fork out big bucks just yet.
Axis-Praxis is a playground for experimenting with variable fonts and understanding some of the creative possibilities. It includes some really interesting and creative samples!
Variablefonts.dev is a project by Mandy Michael, who is well-known in the CSS world for creating awe-inspiring demos with variable fonts and speaking about them all over the world.
CSS variables are becoming a standard, with more than 90% of currently used browsers supporting it out of the box. Before CSS variables, there was a CSS value that shared some common ground as CSS variables, called currentColor.
So, how does currentColor work? Basically, an element that has CSS property with currentColor value inherits the value of the color property (of the same element). Basically, the computed value of color will be applied as a value of currentColor.
This value can be applied to the following CSS properties: borders, outlines, box shadows, and backgrounds.
This is useful when borders, shadows, outlines or background share the same color value. It’s great for keeping your code DRY in cases where other properties like background, borders, outline, etc. need to have the same color as text.
In this example, we simply change the color in the BEM modifier classes and this changes text color, background color of the box to the left and border color.
https://www.variable-fonts.com/
The word is the condition for reading. The word consists of both white and black forms in rhythm units. If the rhythm is weak; the word is poorly formed. If the rhythm is absent; there is no word. Reading is a spatial manner of intervals in both length and breadth…. Ignoring the white by pedagogy places civilization at risk. What is civilization if not the cultural community dependent on reading?
