Live site Variable Fonts Demo

Part of the variable fonts demo, an excerpt from The Rime of the Ancient Mariner
Design, front-end development, writing
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.