CSS font-variation-settings Property

Description

The font-variation-settings CSS property is a crucial component of modern typography in web design. It allows precise control over variable fonts, which are typefaces with multiple axes of variation, such as weight, width, and slant. Web developers can use this property to adjust and fine-tune these axes, enabling greater typographic flexibility and creativity. By specifying specific numeric values for each axis, designers can achieve the desired visual characteristics for text, enhancing both readability and aesthetics on the web. This property has revolutionized web typography by enabling a single font file to adapt dynamically to various design requirements, reducing the need for multiple font files and improving web page performance.

Initial value: normal
Applies to: all elements. It also applies to ::first-letter and ::first-line.
Inherited: yes
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.fontVariationSettings

Syntax

font-variation-settings: normal | <string> <number>

Values

normalText is laid out using default settings.
<string> <number>When rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features. Each setting is always one or more pairs consisting of a <string> of 4 ASCII characters followed by a indicating the axis value to set. If the <string> has more or fewer characters or contains characters outside the U+20 - U+7E code point range, the whole property is invalid. The <number> can be fractional or negative, depending on the value range available in your font, as defined by the font designer.

Example

CSS

h1 {
  font-family: 'MyVariableFont', sans-serif;
  font-variation-settings: 'wght' 700, 'wdth' 100;
  /* 'wght' controls font weight, 'wdth' controls font width */
}

p {
  font-family: 'MyVariableFont', sans-serif;
  font-variation-settings: 'wght' 400, 'wdth' 150;
}