Variable typefaces are the next big thing in web typography. They allow for more creativity and style liberty. That's all while decreasing your typeface load time to a half, and even less! ► Envato Components: typefaces, design templates, images & more:
In this course with Kezz Bracey, you'll learn what variable typefaces are, why they're such a huge step forward, and everything you need to know to begin creating with them and utilizing them in your websites.
Source Files:
1 – Intro
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 Liberty and Creativity
2 – Understanding Variable Typefaces
00:09:45 2.1 – Font Style Axes (Settings).
00:13:29 2.2 – Named Instances.
00:17:27 2.3 – Finding Variable Fonts.
00:20:34 2.4 – Previewing Variable Font Styles.
00:23:23 2.5 – UI Mockup With Adobe Software Application.
00:28:14 2.6 – Browser Assistance.
3 – Let's Get Coding.
00:31:23 3.1 – Deploying Variable Font Styles.
00:40:02 3.2 – Top-level and Low-Level CSS Characteristics.
00:46:40 3.3 – Font Weight.
00:54:56 3.4 – Typeface Stretch (Width).
01:02:51 3.5 – Font Style (Slant/Italic).
01:10:34 3.6 – Font Optical Sizing.
01:14:53 3.7 – Customized Axes.
01:21:30 3.8 – Fallbacks.
4 – Conclusion.
01:29:43 4.1 – Finishing up.
Forum:.
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – -.
Envato Tuts+.
Discover complimentary how-to tutorials and online courses. Design a logo design, produce a site, construct an app, or find out a brand-new skill:.
Envato Elements.
All the creative possessions you require under one membership. Tailor your project by adding distinct images, font styles, graphics, and styles.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Aspects:.
► Sign Up For Envato Tuts+ on YouTube:.
► Follow Envato Tuts+ on Twitter:.
► Follow Envato Tuts+ on Facebook:.
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – -.
CSS Best Sellers
Let’s learn something… Reminder Set… Here for the first comment ?
⁶ubiuíú778hemúuuiju⁷7⁷uuu⁶gyi9b8uú7u7⁷ýu⁷7⁷vyy66ūuì⁸í9⁶8cíi9v9buuuu77y6⅞ibiííí9b8bíuúu⁷uub9vbivuu7ijvu
cann’t wait….
gather around let learn something new….
Yeaahhhhhhhh???
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?
OK, Boomer.
It’s not just a few milliseconds, that test was around a 6-second difference, with a decent connection, and good hardware, on a page that was literally just some lines of text. That adds up. Not everyone is on a new mac with fiber connection or rocking the yearly phone upgrades, developers need to meet the needs of those with lower specs as well.
@Dr Narco The Intelligent Thermos Nah, probably a zoomer. Boomers would understand the benefits of faster load times on older hardware with slow connections lol.
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!
*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!
Great video!
Hi there, can you tell me how to add texture in this mock-up?