sass-site/source/assets/sass/visual-design/_typography.scss

$sl-font-weight--light:   300 !default;
$sl-font-weight--regular: 400 !default;
$sl-font-weight--bold:    600 !default;

$sl-font-weights: (
  light:   $sl-font-weight--light,
  regular: $sl-font-weight--regular,
  bold:    $sl-font-weight--bold,
);

@each $name,
      $value in $sl-font-weights {

  .sl-font-weight--#{$name} { font-weight: $value; }
}



$sl-font-size--x-small:    sl-px-to-rem(14px) !default;
$sl-font-size--small:      sl-px-to-rem(16px) !default;
$sl-font-size--medium:     sl-px-to-rem(18px) !default;
$sl-font-size--large:      sl-px-to-rem(20px) !default;
$sl-font-size--x-large:    sl-px-to-rem(24px) !default;
$sl-font-size--xx-large:   sl-px-to-rem(28px) !default;
$sl-font-size--xxx-large:  sl-px-to-rem(32px) !default;
$sl-font-size--xxxx-large: sl-px-to-rem(80px) !default;

$sl-font-sizes: (
  small:      $sl-font-size--small,
  medium:     $sl-font-size--medium,
  large:      $sl-font-size--large,
  x-large:    $sl-font-size--x-large,
  xx-large:   $sl-font-size--xx-large,
  xxx-large:  $sl-font-size--xxx-large,
  xxxx-large: $sl-font-size--xxxx-large,
);

@each $name,
      $value in $sl-font-sizes {

  .sl-font-size--#{$name} { font-size: $value; }
}



$sl-font-family--text:     'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$sl-font-family--display:  'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Roman', 'Droid Serif', Times, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$sl-font-family--code:     'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', 'Droid Sans Mono', monospace, monospace !default;

$sl-font-families: (
  text:    $sl-font-family--text,
  display: $sl-font-family--display,
  code:    $sl-font-family--code,
);

@each $name,
      $value in $sl-font-families {

  .sl-font-family--#{$name} { font-family: $value; }
}

body,
h5,
h6 { font-size: $sl-font-size--medium; }

body {
  line-height: 1.5;
  font-family: $sl-font-family--text;
  text-rendering: optimizeLegibility;
}

* { min-width: 0; }

a { text-decoration: none; }

strong,
b,
h5,
h6,
dt,
tbody th,
label { font-weight: $sl-font-weight--bold; }

h1,
h2,
caption,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
figure,
details {
  margin: 1rem 0;
  padding: 0;
}

h2,
h3,
h4,
h5,
h6 {
  margin-top: 2.5rem;

  aside &, nav & { margin-top: 1rem; }
}

ul,
ol,
dd { margin-left: 1.75rem; }

h1,
h2,
caption,
h3,
h4,
h5,
h6 {
  font-weight: $sl-font-weight--regular;
  line-height: 1.25;
}

h1,
h2,
caption { letter-spacing: -#{sl-px-to-em(.5px)}; }

h1,
h2 { font-weight: $sl-font-weight--light; }

h1 {
  margin-top: 0;
  font-size: $sl-font-size--xx-large;
  line-height: 1;
  text-align: center;

  @include sl-breakpoint--medium { font-size: $sl-font-size--xxx-large; }

  @include sl-breakpoint--large { font-size: $sl-font-size--xxxx-large; }
}

h2,
caption,
legend,
h3,
thead th { font-family: $sl-font-family--display; }

h2,
caption {
  font-size: $sl-font-size--x-large;

  @include sl-breakpoint--medium { font-size: $sl-font-size--xx-large; }

  @include sl-breakpoint--large { font-size: $sl-font-size--xxx-large; }
}

h3,
h4 { font-size: $sl-font-size--large; }

nav,
footer { font-size: $sl-font-size--small; }

.caps {
  font-size: sl-px-to-em(14px);
  text-transform: uppercase;
  letter-spacing: sl-px-to-em(1px);
  line-height: 0;
}

code,
pre {
  font-family: $sl-font-family--code;
}

code {
  // Scale the code font size down, because the font itself is much larger.
  font-size: ($sl-font-size--small / $sl-font-size--medium) * 1em;
  line-height: 1;

  nav & { white-space: nowrap; }
  p & {
    @include sl-breakpoint--x-large { white-space: nowrap; }
  }
}

pre {
  font-size: $sl-font-size--x-small;
  padding: .75rem 1rem;
  overflow: auto;
  white-space: pre-wrap;

  code {
    font-size: 1em;
    line-height: inherit;
  }
}

img {
  display: block;
  margin: {
    right: auto;
    left: auto;
  };
  max-width: 100%;
  height: auto;
}

hr {
  margin: {
    top: 3rem;
    bottom: 3rem;
  };
}

dd { margin: 0; }