// Type

body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 1.5rem;
  font-weight: 400;
}


// Base Type Scale

h1, .h1, .f1 {
  font-size: 2rem;
  line-height: 3rem;
}

h2, .h2, .f2 {
  font-size: 1.5rem;
  line-height: 2rem;
}

h3, .h3, .f3 {
  font-size: 1.25rem;
  line-height: 2rem;
}

p, .p, .f4, h4, h5, h6, dl, ol, ul {
  font-size: 1.125rem;
  line-height: 1.5rem;
}

small, .small, .f5 {
  font-size: .875rem;
  line-height: 1.5rem;
}


// Responsive Type Scale

@media screen and (min-width: 48em) {
  .h1 {
    font-size: 4rem;
    line-height: 5rem;
  }
  .h2 {
    font-size: 2rem;
    line-height: 3rem;
  }
  .h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
  .small {
    font-size: 1rem;
  }
}

@media screen and (min-width: 64em) {
  .h1 {
    font-size: 6rem;
    line-height: 8rem;
  }
  .h2 {
    font-size: 3rem;
    line-height: 4rem;
  }
}


// Utilities

strong, .bold { font-weight: bold; }
.regular { font-weight: normal; }
.italic { font-style: italic; }
.caps { text-transform: uppercase; letter-spacing: .2em; }
.center { text-align: center; }
.right-align  { text-align: right; }


// Typographical Measure
// Use with the .wrap class to center container

.measure { max-width: 48rem; }
.measure-narrow { max-width: 32rem; }
.measure-wide { max-width: 60rem; }


// Leading utilities to control line-height

.leading-1 { line-height: 1.5rem; }
.leading-2 { line-height: 2rem; }
.leading-3 { line-height: 3rem; }
.leading-4 { line-height: 4rem; }

