From the course: CSS: Variable Fonts

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Variation: Weight

Variation: Weight - CSS Tutorial

From the course: CSS: Variable Fonts

Start my 1-month free trial

Variation: Weight

- [Instructor] The first and most common registered variation axis is weight. The weight axis describes how light or heavy, so thick or thin the letter form can be. The lower the number, the lighter the font, the higher the number the heavier the font. The weight axis can be any range between one and 1,000, but typeface designers typically restrict the axis to the smaller range. So on this font for instance it's one to 900. You can control the weight axis individually using the font weight property and providing a number along that available range. Now for a variable font, you have to use a number with font weight. Values like lighter and normal and bold and bolder are not available because they don't map to any specific number. If you want the normal weight in a variable font, it will always be the number 400. You can also control the weight axis using the font variation settings property and setting the weight or WGHT…

Contents