### Set line height in CSS

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

Example of setting font size in pixels and line height as a percentage.

```css
p {
	font-size: 16px;
	line height:150%; /* Equivalent to 24px */
}
```

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

### Final Variable Font CSS Configuration

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

A complete example demonstrating the application of font-family, font-stretch, font-weight, and font-style for a variable font.

```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%;
}
```

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

### Use @supports for High-level OpenType Settings

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

Demonstrates how to use a `@supports` query to apply high-level OpenType settings for browsers that support them, with a fallback for others.

```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 */
  }
}
```

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

### Set Default Font Family

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

Apply a font family to the entire page or specific elements. This example sets 'DM Sans' as the primary font for the body, with a fallback to a generic sans-serif.

```css
body {
    font-family: 'DM Sans', sans-serif;
}
```

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

### Compare Low-level and High-level OpenType Settings

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

Illustrates the difference between low-level `font-feature-settings` and high-level `font-variant-*` properties for common OpenType features.

```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 */
```

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

### Apply basic CSS typography styles

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

CSS rules for setting font sizes, line height, and maximum container width to improve text readability.

```css
body {
    font-size: 16px;
}
h2 {
    font-size: 150%;
}
h1 {
    font-size: 200%;
}
```

```css
body {
    line-height: 125%;
}
```

```css
body {
    max-width: 20em;
}
```

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

### Implement a color font

Source: https://fonts.google.com/knowledge/introducing_type/introducing_color_fonts

Basic CSS implementation for using a color font from Google Fonts.

```css
@import url('https://fonts.googleapis.com/css2?family=Nabla&display=swap');

p {
  font-family: "Nabla";
}
```

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

### Apply variable width using CSS

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

Demonstrates setting custom font-stretch percentages to adjust character width.

```css
p {
  font-stretch: 50%;
}

strong {
  font-stretch: 193%;
}
```

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

### Apply variable weight using CSS

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

Demonstrates setting non-standard font-weight values for paragraph and strong elements.

```css
p {
  font-weight: 350;
}

strong {
  font-weight: 780;
}
```

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

### Implement smooth hover transitions with variable fonts

Source: https://fonts.google.com/knowledge/using_variable_fonts_on_the_web/interactive_animations_with_variable_fonts

Use CSS transitions to create continuous weight changes on hover instead of abrupt jumps.

```css
a {
  font-variation-settings: 'wght' 400;
  transition: font-variation-settings 0.3s ease;
}

a:hover {
  font-variation-settings: 'wght' 700;
}
```

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

### Define basic HTML document structure

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

A standard HTML5 boilerplate demonstrating the use of headings, paragraphs, and emphasis tags within the body.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My example page</title>
  </head>
  <body>
    <h1>The page heading</h1>
<p>Pellentesque eget aliquet nunc. Duis auctor suscipit augue imperdiet viverra. <strong>Morbi ullamcorper</strong> massa odio, aliquet rutrum ex pellentesque aliquet. Ut maximus in ipsum quis vestibulum. Aenean et placerat magna. Pellentesque ac consectetur est, et pretium diam. Nulla in nisl vitae elit fermentum commodo id vel tellus. Quisque id maximus justo. Suspendisse potenti.</p>
    <h2>A section heading</h2>
<p>Proin vitae urna vitae leo finibus dictum vitae sit amet sem. Maecenas varius accumsan mauris, eu <em>sollicitudin neque</em>. Ut euismod dolor maximus facilisis consequat.</p>
  </body>
</html>
```