Google Fonts Knowledge

https://fonts.google.com/knowledge
Admin
Google Fonts Knowledge is a comprehensive educational resource that teaches typography, type design,...
Tokens:213,104
Snippets:2,212
Trust Score:10
Update:1 hour ago
Show doc for...
Tokens:
Raw
### Final CSS for variable font usage

Source: https://fonts.google.com/knowledge/using_type/switching_from_static_to_variable_fonts

Complete CSS example combining font-family, font-stretch, font-weight, and font-style to use the variable version of Anybody with multiple axes.

```css
body {
  font-family: "Anybody", sans-serif;
  font-stretch: 72%;
  font-weight: 147;
}

strong {
  font-weight: 663;
}

em {
  font-style: italic;
}

span {
  font-stretch: 150%;
}
```

--------------------------------

### Set explicit opsz values with font-variation-settings

Source: https://fonts.google.com/knowledge/glossary/optical_size_axis

Uses font-variation-settings to set explicit optical size values in px for different elements. The example sets 'opsz' to 16 for body and 48 for h1.

```CSS
body {
  font-variation-settings: 'opsz' 16;
}
h1 {
  font-variation-settings: 'opsz' 48;
}
```

--------------------------------

### Use @supports to provide high-level OpenType feature fallback

Source: https://fonts.google.com/knowledge/using_type/implementing_open_type_features_on_the_web

Provides a .fraction class that uses low-level font-feature-settings for all browsers, then resets it and applies font-variant-numeric: diagonal-fractions only when supported. Note that this adds more kilobytes to the CSS file.

```css
.fraction {
    font-feature-settings: frac; /* Low-level setting for all browsers */
}

@supports (font-variant-numeric: diagonal-fractions) {
  .fraction {
      font-feature-settings: normal; /* Reset the low level, then... */
      font-variant-numeric: diagonal-fractions; /* ... use the better code */
  }
}
```

--------------------------------

### CSS letter-spacing adjustments for kerning

Source: https://fonts.google.com/knowledge/using_type/manual_kerning_is_rarely_required

Set the default letter-spacing to 0em and then apply a negative value to the span to tighten the space. The example uses -0.0125em for the 'tighter' class.

```css
p {
  letter-spacing: 0em;
}
p span.tighter {
  letter-spacing: -0.0125em;
}
```

--------------------------------

### Compare low-level and high-level OpenType feature settings

Source: https://fonts.google.com/knowledge/using_type/implementing_open_type_features_on_the_web

Shows equivalent low-level font-feature-settings and high-level font-variant-* properties for stylistic sets, diagonal fractions, small caps, and discretionary ligatures. Use the high-level syntax for future-facing CSS, but note that many high-level settings lack widespread browser support.

```css
font-feature-settings: "ss01"; /* Stylistic set 1 on, low-level */
font-variant-alternates: styleset(ss01); /* Stylistic set 1 on, high-level */

font-feature-settings: "frac"; /* Diagonal fractions on, low-level */
font-variant-numeric: "diagonal-fractions"; /* Diagonal fractions on, high-level */

font-feature-settings: "smcp"; /* Small caps on, low-level */
font-variant-caps: "small-caps"; /* Small caps on, high-level */

font-feature-settings: "diga"; /* Discretionary ligatures on, low-level */
font-variant-ligatures: "discretionary-ligatures"; /* Discretionary ligatures on, high-level */
```
Tokens:
Raw