Live site
Variable Fonts Demo

Year

2018

Role

Design, front-end development, writing

Credits

Greg Whitworth: writing, front-end; François Remy: front-end

This Microsoft Edge web dev demo showcases variable fonts, or an extension to OpenType where one font file holds information about an entire font family. Developers can use CSS to adjust various “axes”, in order to manipulate various properties of the font, such as weight, width, and decorative elements in the glyphs. This demo shows how developers can get quite expressive with just one font file—and can even animate these properties on the fly. Favorite design details include the ice floe-breakup on scroll, as well as heading animations.