Variable Fonts for Web Design | FREE COURSE

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.

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[chacecampbell]

*Important note for people on smaller monitors/screens*
The Axis Praxis site isn't terribly responsive so the right sidebar used to import and edit font variables might be stuck off or just off-screen for you. If that's the case just zoom out your browser window ('Ctrl' or 'Option' + '-') until it's visible. Also, be sure that file you drag over is in 'TTF' format, woff and woff2 don't work.

Thank you so much for the video!

[somendrafx]

Let's learn something... Reminder Set... Here for the first comment 🎉

[danielneves]

Hi, great course! I just have a question, you said that you can have as many axis as you want on a variable font, but when you are designing one in glyphs, they only let you reach 6 axis, how can i add more? Thanks!

[sukhwindersinghgahla]

Hi there, can you tell me how to add texture in this mock-up?

[adeyemiadeshina]

gather around let learn something new....

[wacwonnoff]

With that list of developers it is most probably another intellectual property grab. Protectionist approach rather than passing the good things down the line approach of open source. Nothings wrong with loads of fonts they don’t take up hard drive space, and load time is a joke, what’s wrong with waiting an extra few milliseconds?