.typography {
  font-family: var(--dm-sans), sans-serif;
  font-weight: var(--font-weight-regular);
  margin: 0;

  &.display-l-nib-pro,
  &.display-m-nib-pro,
  &.display-s-nib-pro,
  &.headline-l-nib-pro,
  &.headline-m-nib-pro,
  &.headline-s-nib-pro,
  &.title-l-nib-pro {
    font-family: var(--nib-pro), serif;
    /* Nib Pro is a bit lighter than DM Sans */
    font-weight: calc(var(--font-weight-regular) - 50);
  }

  &.display-l-nib-pro,
  &.display-l-dm-sans-baseline,
  &.display-l-dm-sans-emphasis {
    font-size: 57px;
    line-height: 64px;
    letter-spacing: -0.5px;
  }

  &.display-m-nib-pro,
  &.display-m-dm-sans-baseline,
  &.display-m-dm-sans-medium,
  &.display-m-dm-sans-emphasis {
    font-size: 45px;
    line-height: 52px;
    letter-spacing: -0.5px;
  }

  &.display-s-nib-pro,
  &.display-s-dm-sans-baseline,
  &.display-s-dm-sans-medium,
  &.display-s-dm-sans-emphasis {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.5px;
  }

  &.headline-l-nib-pro,
  &.headline-l-dm-sans-baseline,
  &.headline-l-dm-sans-emphasis {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.5px;
  }

  &.headline-m-nib-pro,
  &.headline-m-dm-sans-baseline,
  &.headline-m-dm-sans-medium,
  &.headline-m-dm-sans-emphasis {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.5px;
  }

  &.headline-s-nib-pro,
  &.headline-s-dm-sans-baseline,
  &.headline-s-dm-sans-medium,
  &.headline-s-dm-sans-emphasis {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
  }

  &.title-l-nib-pro,
  &.title-l-dm-sans-baseline,
  &.title-l-dm-sans-medium,
  &.title-l-dm-sans-emphasis {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.5px;
  }

  &.title-m-baseline,
  &.title-m-medium,
  &.title-m-emphasis {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.25px;
  }

  &.title-s-baseline,
  &.title-s-medium,
  &.title-s-emphasis {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
  }

  &.body-l-baseline,
  &.body-l-medium,
  &.body-l-emphasis {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.25px;
  }

  &.body-m-baseline,
  &.body-m-medium,
  &.body-m-emphasis {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
  }

  &.body-s-baseline,
  &.body-s-medium,
  &.body-s-emphasis {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
  }

  &.label-l-baseline,
  &.label-l-medium,
  &.label-l-emphasis {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.25px;
  }

  &.label-m-baseline,
  &.label-m-medium,
  &.label-m-emphasis {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
  }

  &.label-s-baseline,
  &.label-s-medium,
  &.label-s-emphasis {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
  }

  &.display-l-dm-sans-medium,
  &.display-m-dm-sans-medium,
  &.display-s-dm-sans-medium,
  &.headline-l-dm-sans-medium,
  &.headline-m-dm-sans-medium,
  &.headline-s-dm-sans-medium,
  &.title-l-dm-sans-medium,
  &.title-m-medium,
  &.title-s-medium,
  &.body-l-medium,
  &.body-m-medium,
  &.body-s-medium,
  &.label-l-medium,
  &.label-m-medium,
  &.label-s-medium {
    font-weight: var(--font-weight-medium);
  }

  strong,
  &.display-l-dm-sans-emphasis,
  &.display-m-dm-sans-emphasis,
  &.display-s-dm-sans-emphasis,
  &.headline-l-dm-sans-emphasis,
  &.headline-m-dm-sans-emphasis,
  &.headline-s-dm-sans-emphasis,
  &.title-l-dm-sans-emphasis,
  &.title-m-emphasis,
  &.title-s-emphasis,
  &.body-l-emphasis,
  &.body-m-emphasis,
  &.body-s-emphasis,
  &.label-l-emphasis,
  &.label-m-emphasis,
  &.label-s-emphasis {
    font-weight: var(--font-weight-semibold);
  }
}