Very Responsive Typography with Variable Fonts

Overview

Explore the dynamic world of responsive typography using variable fonts in this JSConf Hawaii 2020 conference talk by Mandy Michael. Discover how variable fonts adapt to diverse screen sizes, environments, and devices, enhancing web typography's flexibility. Learn to leverage existing technologies like Media Queries, JavaScript events, and Sensor or Audio APIs to improve website performance, design, accessibility, and usability. Delve into creative opportunities for storytelling and expression that surpass standard fonts' capabilities. Gain insights on optimizing readability across various situations, from adjusting to different screen sizes to adapting to environmental conditions. Examine practical examples, including performance improvements, flexibility demonstrations, and innovative applications like color scheme adaptations and audio-responsive typography. Understand the potential of variable fonts in revolutionizing web design and user experience, opening new avenues for creative and functional typography on the web.

Syllabus

Introduction
Jelly
Variable Fonts
Variable Functions
De Cobre
Browser Support
Using Variable Fonts
Fonts on the Web
Variable Fonts for Performance
Reducing Front Requests
My Answer
Source sans Pro
Flexibility
More Flexibility
Jello
Print Design
Fonts
CSS
Twitter demo
Handwriting fonts
Layering fonts
Wind VF
Google Fonts
Demo
Hot
Marshmallow
Controlling the Font
Color Scheme Media Query
Dark Mode Example
Screen Width
Box Width
breakpoints
JavaScript
Decimal
Cracked Phone
Scribble Tone
Web Audio
Blooming GX
Experiences
Jelly Font
Why Variable Fonts
Conclusion