Very Responsive Typography with Variable Fonts

A presentation at JAMstack_conf San Francisco in in San Francisco, CA, USA by Mandy Michael

Growing Text Demo

Growing Text Demo

Dark Mode Slime Text

Dark Mode Slime Text

CSS is Awesome - Fit to Box

CSS is Awesome - Fit to Box

Device Orientation Woops Demo

Device Orientation Woops Demo

Device Orientation Individual Letter Weight Change Demo

Device Orientation Individual Letter Weight Change Demo

Variable Fonts allow typography on the web to adapt to the flexible nature of screens, environments and devices. We can use variable fonts with pre-existing technologies to improve the performance, design, accessibility and usability of our websites.We can start to design our typography to adjust to various inputs, situations or events using Media Queries, JS events and the Sensor or Audio Apis. This will allow us to modify our fonts to aid in storytelling, achieve improved readability and legibility in different situations, environments or on larger or smaller screens.Let’s begin to explore new and exciting creative opportunities for storytelling, 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.

Video

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.