yves/_scss/nanogram/_typography.scss

$base-font-size: 22px !default;
$font-family-default: serif !default;
$font-family-headings: sans-serif !default;
$font-family-code: monospace !default;

$leading: 1.5rem;

html { font-family: $font-family-default; font-size: $base-font-size }
// -webkit-font-smoothing: antialiased; // only if background darker than font
// text-size-adjust: auto; // WIP; check http://caniuse.com

p {
  margin: $leading/2 0 0;
  padding: 0;
  line-height: $leading;
}

dl,
ul,
ol {
  margin: $leading 0;
  padding: 0;

  li {
    margin: 0;
    padding: 0;
    line-height: $leading;
  }

  dl,
  ul,
  ol { margin: 0; } // font-size: 90%
}

ol { list-style: decimal; margin: 1.5rem }
ul { list-style: none }

blockquote {
  margin: $leading 0;
  padding: 0;
  line-height: $leading;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-family-headings;
  margin: $leading 0 0;
  padding: 0;
  line-height: $leading;
  font-size: 100%;
  font-weight: normal;
}

h1 {
  font-size: 2.5rem;
  line-height: 2 * $leading;
  margin-top: 2 * $leading;
}

h2 {
  font-size: 2.25rem;
  line-height: 1.7 * $leading;
  margin-top: 1.7 * $leading;
}

h3 {
  font-size: 2rem;
  line-height: 1.5 * $leading;
  margin-top: 1.5 * $leading;
}

h4 { font-size: 1.6875rem }
h5 { font-size: 1.43rem }
h6 { font-size: 1.2rem }

table {
  margin-top: $leading;
  border-spacing: 0px;
  border-collapse: collapse;
}

td,
th { padding: 0; line-height: $leading }

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

code {
  vertical-align: bottom; // Force code line height. Not ideal, but works.
  padding: 1px 2px;
  border-radius: .4rem;
	white-space: nowrap;
}

pre {
  padding: 0;
  overflow-x: scroll;
	overflow-y: hidden;

  > code {
    border: 0;
    padding: 0;
    border-radius: 0;
		white-space: pre;

    table { margin: 0 }
  }
}

/* Leading paragraph text */
.lead { font-size: 1.2rem }

/* Hug the block above you */
.hug { margin-top: 0 }

// To change font calcs use:
// https://websemantics.uk/tools/responsive-font-calculator/

/* 1rem(16px) @ 20rem(320px) -> 2rem(32px) @ 120rem(1920px) */
@media (min-width: 20rem) {
  :root { font-size: calc(1rem + ((1vw - 0.2rem) * 1)) }
}

@media (min-width: 120rem) {
  :root { font-size: 1.7rem }
}