The Future of Web Typography with Variable Fonts

A presentation at Fronteers in in Amsterdam, Netherlands by Mandy Michael

Variable Fonts

Variable Fonts

Jello

Jello

Variable Fonts for Developers

Variable Fonts for Developers

Browser Support

Browser Support

Variable fonts & file size

Variable fonts & file size

Growing Text

Growing Text

Growing Text

Growing Text

Weird Wind Example

Weird Wind Example

Marshmallow the Dragon Fire Text

Marshmallow the Dragon Fire Text

Decovar Long Shadow Demo

Decovar Long Shadow Demo

Variable fonts allow web to adapt to screens, environments and device input.

Variable fonts allow web to adapt to screens, environments and device input.

Web Audio API Demo

Web Audio API Demo

Ambient Light Demo with Variable Fonts

Ambient Light Demo with Variable Fonts

Blooming Letters - Light Sensor Demo

Blooming Letters - Light Sensor Demo

Smello the Grumpy Wizard Demo

Smello the Grumpy Wizard Demo

The web is entering a new era of design opportunities with the introduction of CSS Grid, Photoshop like effects such as filters and blend modes and importantly the increasing support for Variable Fonts.

Variable fonts can offer practical and creative opportunities for web design. We can combine them with pre-existing technologies to improve our font performance, design, accessibility and usability of our websites. We can also begin to explore new and exciting creative opportunities for story telling, design and expression in ways standard fonts could never provide us.

This is just the beginning of our journey to discover what we can do with variable fonts.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on Twitter.