Project Title
An Intro to Variable Fonts
Project Date
I designed, built and presented this project in November 2020.
Description
I was invited to give a keynote presentation at the IndieWeb Camp 2020 online conference, so I decided to make a web page summarizing my take on an introduction to variable web fonts.
Design Approach
My main goal with this project was to integrate variable font animations using CSTM Xprmntl 03, a variable font made by CSTM Fonts. I wanted to let the project be a demo for the subject of my presentation, so I chose to animate certain characters in the headlines for this project to highlight the unique custom variable font axis of CSTM Xprmntl 03.
Design Challenges
Something I saw as a potential challenge was my use of viewport width for my font unit sizing as opposed to pixels, ems or rems. It ended up not being a challenge at all, though. Although this is the first web project where I've used viewport width for font sizing, it definitely won't be the last. The responsive gains make it so worth it!
Tools
Figma, Coda 2, MAMP, HTML & CSS
Inspiration
I was heavily inspired by the color palette in this poster for the Tune Yards 2014 Nikki Nack tour, designed by Wes Winship and Mike Davis of Burlesque Design.
