Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

CSS: Variable Fonts

via LinkedIn Learning

Write review

No Longer Offered

Simplilearn Ad

Lead AI-Native Products with Microsoft's Agentic AI Program

Learn More → University of the People Ad

Earn Your Business Degree, Tuition-Free, 100% Online!

Learn More →

Overview

Build a Learning Habit
Download Class Central's free printable study calendar
Download for Free
Get a comprehensive guide to using variable fonts to make designs pop while preserving efficient use of bandwidth.

Syllabus

Introduction
  • Variable fonts: An introduction
1. Variable Fonts: The Big Picture
  • What are variable fonts?
  • Some examples of variable fonts
2. Variable Fonts: The Basics
  • The variation axis
  • Variation: Weight
  • Variation: Width
  • Variation: Optical size
  • Variation: Slant
  • Variation: Italic
  • Use browser tools to discover axis
  • Custom variation axes
2. Variable Fonts in Practice
  • Add a variable font
  • Style variable fonts using old properties
  • Use the font-variation-settings property
  • Interplay between variation axes
  • Use custom properties for easier styling
  • Design typography in the browser
3. Backward Compatibility
  • Current browser support
  • Providing proper fallbacks
Conclusion
  • Thanks, that was fun

Taught by

Morten Rand-Hendriksen

Reviews

4.8 rating at LinkedIn Learning based on 13 ratings

Start your review of CSS: Variable Fonts

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.