Welcome to the world of variable fonts
Fonts are boring, the future is variable fonts
Gosh, I’m so late to this. Indeed. I’ve already worked with hundreds of variables and I’m fond of the Lato font by Google Fonts but the word variable fonts came to my mind just a week ago. Did some mini-research and boom! I was like, “this is so interesting and new to the world of web technology. I should definitely work on this.” I never in my dreams thought that this new technology was announced by Adobe back in 2016 in one of their blog post. Duh.
What will I make?
This:
Not this:
What is a variable font❔
Back in September 2016 at the ATypI conference in Warsaw, a new term was introduced, variable fonts or v-fonts. To explain it, hear what John Hudson said, “a single font file that behaves like multiple fonts”. Exciting?
A variable font has (almost) no boundaries of its properties. It inherits infinite flexibility of its weight or width, its fringes or hooves, its concavity or bracketing and all this without gaining the size of the file!
Much exciting!
All of this would mean so much to the design world. Be it a sketch artist, a typography learner or even a studious web developer/designer like me. Hah!
What will I need? 🛠️
- H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
- Your already wonderful HTML and CSS skills.
- A text editor (I’ll be using VS Code just because for my last tutorial on CSS trick, I used it…I think VS Code is the one and only editor to love!)
- The Gingham variable font file from here.
Shall we, variate?
⚠️ Hey! Before you start anything, let me tell you that the variable fonts won’t run perfectly on my beloved Firefox web browser and that too on Windows. Yes, my alternate browser to do experiments, i.e. Chrome supports that. Check out this for more information. ⚠️
Let’s surge step-by-step:
- Extract that Gingham font ZIP file you just downloaded.
- Pick the
Gingham.woff2file and paste it in your current project folder. - Open the folder in your code editor and make our two obvious files;
index.htmlandstyle.css. - Fill the HTML with boilerplate, link the style-sheet, make a
<h1>and a<span>. Thespanshould have a class, like<span class=”animate”>
Now here comes our beautiful styling part:
- Add a
@font-facerule globally withsrcpointing to the location of where yourwoff2file is located and give it a format ofwoff2. - For the Gingham font we have two main properties to concentrate. First is the
wghtor weight and the second is, as you might’ve guessed, width orwdth. We’ll use thefont-variation-settingsproperty on the<h1>, give it a weight and width of500initially. For thespan, we do the weight of10and a width of0. - Next we’ll add animation to the
span. Select theanimateclass, add a2s infinite alternate-reverseanimation to it. - Finally, we add a
@keyframesproperty to theanimateclass starting from width and weight of0to700and500respectively.
Save and run it on the supported browser. You should be able to achieve the exact result. If not, then here’s the CSS code for the same:
Where to next? 🤔
This was just to show how variable fonts actually vary. We used the same font for the two text elements and you saw the difference. There are many possibilities with such fonts. Here are some of the great resources to check:
Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
