Scaling fonts with px/rem

_typography.scss

html,
body {
  font-size: 14px !important;
}

h1 {
  font-size: 1.602em;
}

h2 {
  font-size: 1.424em;
}

h3 {
  font-size: 1.266em;
}

h4 {
  font-size: 1.125em;
}

h5 {
  font-size: 0.889em;
}

h6 {
  font-size: 0.79em;
}

.display-1 {
  font-size: 3.906em;
}

.display-2 {
  font-size: 3.125em;
}

.display-3 {
  font-size: 2.5em;
}

.display-4 {
  font-size: 2em;
}

@media (min-width: 48em) {
  h1 {
    font-size: 2.441em;
  }
  h2 {
    font-size: 1.953em;
  }
  h3 {
    font-size: 1.563em;
  }
  h4 {
    font-size: 1.25em;
  }
  .display-1 {
    font-size: 6em;
  }
  .display-2 {
    font-size: 5.5em;
  }
  .display-3 {
    font-size: 4.5em;
  }
  .display-4 {
    font-size: 3.5em;
  }
}

// Large devices (desktops, 62em and up)
@media (min-width: 62em) {
  html,
  body {
    font-size: 16px !important;
  }
}

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) {
  html,
  body {
    font-size: 18px !important;
  }
}