@appearhere/bloom/globals/typography.css

Appear Here's pattern library and styleguide

/**
 * Each property declaration should have its own variable, which are then
 * composed together to make `font` property declarations.
 *
 * Typically, start by using the `font` properties and override **individual
 * properties**:
 *
 * ```css
 * .example {
 *   font: var(--font-regular);
 *   line-height: 1.8;
 * }
 * ```
 */
:root {
  --font-avenir: 'Avenir Next W01', 'Helvetica Neue', 'Helvetica', 'sans-serif';
  --font-fira-code: 'Fira Mono', monospace;

  --fontweight-bold: 800;
  --fontweight-demi: 700;
  --fontweight-regular: 400;

  --fontsize-large-v: 2.75rem;
  --fontsize-large-iv: 2rem;
  --fontsize-large-iii: 1.75rem;
  --fontsize-large-ii: 1.5rem;
  --fontsize-large-i: 1.1875rem;
  --fontsize-regular: 1rem;
  --fontsize-small-i: 0.875rem;
  --fontsize-small-ii: 0.6875rem;

  --font-large-v: var(--fontweight-bold) var(--fontsize-large-v)/var(--lineheight-large-v) var(--font-avenir);
  --font-large-iv: var(--fontweight-demi) var(--fontsize-large-iv)/var(--lineheight-large-iv) var(--font-avenir);
  --font-large-iii: var(--fontweight-demi) var(--fontsize-large-iii)/var(--lineheight-large-iii) var(--font-avenir);
  --font-large-ii: var(--fontweight-demi) var(--fontsize-large-ii)/var(--lineheight-large-ii) var(--font-avenir);
  --font-large-i: var(--fontweight-regular) var(--fontsize-large-i)/var(--lineheight-large-i) var(--font-avenir);
  --font-regular: var(--fontweight-regular) var(--fontsize-regular)/var(--lineheight-regular) var(--font-avenir);
  --font-small-i: var(--fontweight-regular) var(--fontsize-small-i)/var(--lineheight-small-i) var(--font-avenir);
  --font-small-ii: var(--fontweight-regular) var(--fontsize-small-ii)/var(--lineheight-small-ii) var(--font-avenir);

  --lineheight-large-v: 0.8148;
  --lineheight-large-iv: 1.34375;
  --lineheight-large-iii: 1.28571;
  --lineheight-large-ii: 1.333;
  --lineheight-large-i: 1.263;
  --lineheight-regular: 1.4375;
  --lineheight-small-i: 1.285;
  --lineheight-small-ii: 1.363;

  --letter-spacing-large-v: 0.32rem;
  --letter-spacing-large-iv: 0.01875rem;
  --letter-spacing-large-iii: 0.01875rem;
  --letter-spacing-large-ii: 0.01875rem;
  --letter-spacing-large-i: 0.0125rem;
  --letter-spacing-regular: 0.010625rem;
  --letter-spacing-small-i: 0.009375rem;
  --letter-spacing-small-ii: 0.009375rem;

  /* Old style spacing */
  /* TODO: Remove in future version */
  --letterspacing-wide: 0.125rem;
  --letterspacing-less-wide: 0.009375rem;
}

/**
 * These classes are for composition only, e.g.:
 *
 * .anotherClass {
 *   composes: fontLargeVi;
 * }
 *
 * This avoids an issue with IE10 where the `font` shorthand
 * doesn't support `rem` units:
 * http://stackoverflow.com/questions/16157342/css-rem-unit-not-working-with-font-declarations
 */
.fontLargeV {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-v);
  line-height: var(--lineheight-large-v);
  letter-spacing: var(--letter-spacing-large-v);
  font-weight: var(--fontweight-bold);
}

.fontLargeIv {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-iv);
  line-height: var(--lineheight-large-iv);
  letter-spacing: var(--letter-spacing-large-iv);
  font-weight: var(--fontweight-demi);
}

.fontLargeIii {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-iii);
  line-height: var(--lineheight-large-iii);
  letter-spacing: var(--letter-spacing-large-iii);
  font-weight: var(--fontweight-demi);
}

.fontLargeIi {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-ii);
  line-height: var(--lineheight-large-ii);
  letter-spacing: var(--letter-spacing-large-ii);
  font-weight: var(--fontweight-demi);
}

.fontLargeI {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-i);
  line-height: var(--lineheight-large-i);
  letter-spacing: var(--letter-spacing-large-i);
  font-weight: var(--fontweight-demi);
}

.fontRegular {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-regular);
  line-height: var(--lineheight-regular);
  letter-spacing: var(--letter-spacing-regular);
  font-weight: var(--fontweight-regular);
}

.fontSmallI {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-small-i);
  line-height: var(--lineheight-small-i);
  letter-spacing: var(--letter-spacing-small-i);
  font-weight: var(--fontweight-regular);
}

.fontSmallIi {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-small-ii);
  line-height: var(--lineheight-small-ii);
  letter-spacing: var(--letter-spacing-small-ii);
  font-weight: var(--fontweight-regular);
}

.fontCode {
  font-family: var(--font-fira-code);
  font-size: var(--fontsize-regular);
  line-height: var(--lineheight-regular);
  letter-spacing: var(--letter-spacing-regular);
  font-weight: var(--fontweight-regular);
}