From the course: CSS: Variable Fonts

Variable fonts: An introduction - CSS Tutorial

From the course: CSS: Variable Fonts

Start my 1-month free trial

Variable fonts: An introduction

“

- [Morten] The web used to be a really boring place typography wise for a simple reason: web browsers could only use the fonts installed on the current system, which is why we declare font families in our CSS, literally telling the browser, for example, "Hey, use either Arial or Helvetica or whatever Sans-Serif font you have available". That all changed with the introduction of web fonts and the ability to provide the browser with custom typefaces and font styling, typically weight and italics. A significant portion of the fonts you see on the web today are such custom fonts, provided either by the website itself, or through an online service like Google Fonts. But, there's a problem. Each of these styles of these custom fonts, thin, regular, regular italic, et cetera, require their own typeface files. So the more fonts you add to a view, the more typefaces the browser has to download. In other words, fonts are a significant performance issue. To solve this, we now have variable fonts, which is what this course is all about. Variable fonts are, quite literally, variable. Instead of a typeface file containing one style of a font, it contains a typeface, which can be varied across different axes. So instead of downloading a bunch of typeface files for different weights and widths and other factors, you download one typeface and vary it as required. This is more performant, you get access to new font variations, and it opens the door to new typography experiments on the web. Variable fonts are the next evolution of typography on the web, and I'm here to show you how to get it right. So let's get cracking.

Contents