Variable Fonts for Web Design | FREE COURSE

Channel:

Envato Tuts+

Subscribers:

1,630,000

Published on January 20, 2021 4:00:10 PM ● Video Link: https://www.youtube.com/watch?v=9IFqv5uVP_c

Duration: 1:34:54

10,025 views

266

Variable fonts are the next big thing in web typography. They allow for more creativity and design freedom. That’s all while reducing your font load time down to a half, or even less! ► Envato Elements: fonts, templates, images & more: https://elements.envato.com/?utm_campaign=yt_tutsplus_9IFqv5uVP_c&utm_medium=referral&utm_source=youtube.com&utm_content=description

In this course with Kezz Bracey, you’ll learn what variable fonts are, why they’re such a big step forward, and everything you need to know to start designing with them and using them in your websites.

Source Files: https://github.com/tutsplus/Up-and-Running-with-Variable-Fonts

1 - Introduction
00:00:00 1.1 - Welcome to the Course
00:00:59 1.2 - Variable Fonts for Fast Loading
00:05:32 1.3 - Variable Fonts for Freedom and Creativity

2 - Understanding Variable Fonts
00:09:45 2.1 - Font Axes (Settings)
00:13:29 2.2 - Named Instances
00:17:27 2.3 - Finding Variable Fonts
00:20:34 2.4 - Previewing Variable Fonts
00:23:23 2.5 - UI Mockup With Adobe Software
00:28:14 2.6 - Browser Support

3 - Let’s Get Coding
00:31:23 3.1 - Deploying Variable Fonts
00:40:02 3.2 - High-Level and Low-Level CSS Properties
00:46:40 3.3 - Font Weight
00:54:56 3.4 - Font Stretch (Width)
01:02:51 3.5 - Font Style (Slant/Italic)
01:10:34 3.6 - Font Optical Sizing
01:14:53 3.7 - Custom Axes
01:21:30 3.8 - Fallbacks

4 - Conclusion
01:29:43 4.1 - Wrapping Up

Forum: https://forums.envato.com/c/project-making/envato-courses-and-tutorials?utm_campaign=yt_tutsplus_9IFqv5uVP_c&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_9IFqv5uVP_c&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_9IFqv5uVP_c&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -