Base typography

_typography.scss

@mixin define-font($size, $ratio, $margin: true) {
  $lineHeight: $size * $ratio;

  font-size: $size;
  line-height: $lineHeight;

  @if ($margin) {
    margin-bottom: $lineHeight / 4;
  }
}

* {
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
}

p, h6, h5, h4, h3, h2, h1 {
  margin: 0;
}

* {
  @include define-font(1rem, 1.5, false);
}

p {
  @include define-font(1rem, 1.5);
}

h6 {
  @include define-font(1.25rem, 1.5);
}

h5 {
  @include define-font(1.5rem, 1.5);
}

h4 {
  @include define-font(1.75rem, 1.5);
}

h3 {
  @include define-font(2rem, 1.25);
}

h2 {
  @include define-font(2.5rem, 1.25);
}

h1 {
  @include define-font(3rem, 1.25);
}