This course teaches learners how to utilize Variable Fonts to create responsive typography on the web, adapting to different screens and devices. By incorporating Variable Fonts with existing technologies, students will enhance website performance, design, accessibility, and usability. Through Media Queries, JS events, and APIs, participants will learn to dynamically adjust typography for improved storytelling, readability, and legibility across various environments and screen sizes. The course explores the creative possibilities Variable Fonts offer for design and expression, providing a foundation for learners to experiment with this innovative typography tool. The intended audience for this course includes web designers, developers, and anyone interested in enhancing web typography and design.
Overview
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
Taught by
JSConf
