Basic settings for typography.

_typography.scss

body {
  color: $c-text;
  font: #{$base-font-size}/#{$baseline} $f-404;
}

a {
  color: $c-link;

  &:hover {
    color: $c-hover;
  }
}

h1,
h2,
h3,
h4 {
  font-family: $f-707;
  
  padding: 0;
  margin: .3em 0;
}

h5,
h6 {
  font-family: $f-303;
  padding: 0;
  margin: .5em 0 1em;
}

h1 { font-size: 3.2em; }
h2 { font-size: 2.4em; }
h3 { font-size: 2em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }

@media only screen and (max-width: 768px) {
  h1 { font-size: 2.4em; }
  h2 { font-size: 1.6em; }
  h3 { font-size: 1.2em; }
  h4 { font-size: 1em; }
  h5 { font-size: .8em; }
  h6 { font-size: .6em; }
  p,
  a, 
  blockquote,
  li
  {font-size: .8em }
}

@media only screen and (max-width: 991px) {
  h1 { font-size: 2.8em; }
  h2 { font-size: 2em; }
  h3 { font-size: 1.6em; }
  h4 { font-size: 1.2em; }
  h5 { font-size: 1em; }
  h6 { font-size: .8em; }
  p,
  a, 
  blockquote,
  li
  {font-size: .9em }
}



blockquote cite {
  color: $c-text-light;
}

ul.meta li {
  font-family: $f-303;
}