next-static-site/styles/_typography.scss

html,
body {
  font-family: 'objectivityregular';
  letter-spacing: -0.02px;
  color: $charcoal;
}

a {
  color: $jambonz;
  text-decoration: none;
}

/*
 * Buttons have their own inline svg/span styles
 * This className lets us inline a flat icon with text
 */
.i {
  svg, span, strong {
    display: inline;
    vertical-align: middle;
  }

  svg:last-child {
    margin-left: 8px;
  }

  svg:first-child {
    margin-right: 8px;
  }
  
  /*
   * Using React Feather
   * https://github.com/feathericons/react-feather
   * Default size is 24x24 for SVG icons
   * Sizing can be passed in component JS as in:
   * <Icon size={18} name="GitHub" />
   * However the inline, in-text SVG icons need to be
   *    responsive with the text scaling so some CSS
   *    can achieve the desired result in this case:
   *    e.g. <span>text</span><Icon name="ExternalLink" />
   *
   */
  svg {
    @media (max-width: $width-tablet-1) {
      width: 20px;
      height: 20px;
    }

    @media (max-width: $width-tablet-2) {
      width: 18px;
      height: 18px;
    }

    // @note: Consideration on stopping type reduction here
    // @media (max-width: $width-mobile) {
    //   width: 16px;
    //   height: 16px;
    // }
  }
}

strong {
  @include font-bold();
}

em {
  font-family: 'objectivityregular_slanted';
}

.h1, h1 {
  font-size: $h1-size;
  line-height: 1.33;
  letter-spacing: -0.06px;
  @include font-bold();

  @media (max-width: $width-tablet-1) {
    font-size: $h2-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $h3-size;
  }

  @media (max-width: $width-mobile) {
    font-size: $h4-size;
  }
}

.h2, h2 {
  font-size: $h2-size;
  line-height: 1.35;
  letter-spacing: -0.05px;
  @include font-bold();

  @media (max-width: $width-tablet-1) {
    font-size: $h3-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $h4-size;
  }

  @media (max-width: $width-mobile) {
    font-size: $h5-size;
  }
}

.h3, h3 {
  font-size: $h3-size;
  line-height: 1.33;
  letter-spacing: -0.05px;
  @include font-bold();

  @media (max-width: $width-tablet-1) {
    font-size: $h4-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $h5-size;
  }

  @media (max-width: $width-mobile) {
    font-size: $h6-size;
  }
}

.h4, h4 {
  font-size: $h4-size;
  line-height: 1.5;
  letter-spacing: -0.04px;
  @include font-medium();

  @media (max-width: $width-tablet-1) {
    font-size: $h5-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $h6-size;
  }

  @media (max-width: $width-mobile) {
    font-size: $p-size;
  }
}

.h5, h5 {
  font-size: $h5-size;
  line-height: 1.67;
  letter-spacing: -0.03px;
  @include font-medium();

  span {
    color: $jambonz;
  }

  @media (max-width: $width-tablet-1) {
    font-size: $h6-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $p-size;
  }

  // @note: Consideration on stopping type reduction here
  // @media (max-width: $width-mobile) {
  //   font-size: $m-size;
  // }
}

.h6, h6 {
  font-size: $h6-size;
  line-height: 1.8;
  letter-spacing: -0.03px;
  @include font-medium();

  @media (max-width: $width-tablet-1) {
    font-size: $p-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $m-size;
  }

  // @note: Consideration on stopping type reduction here
  // @media (max-width: $width-mobile) {
  //   font-size: $ms-size;
  // }
}

.p, p {
  @include p();
}

.m {
  font-size: $m-size;
  line-height: 1.9;

  // @note: Consideration on stopping type reduction here?
  @media (max-width: $width-tablet-1) {
    font-size: $ms-size;
  }
}

.ms {
  font-size: $ms-size;
  line-height: 2;

  // @note: Consideration on stopping type reduction here
  // @media (max-width: $width-tablet-1) {
  //   font-size: $mxs-size;
  // }
}

.mxs {
  font-size: $mxs-size;
  line-height: 2;
}

.color--teal {
  color: $teal;
}

.color--blue {
  color: $blue;
}

.color--purple {
  color: $purple;
}