Relative Baseline Grid Notes

relative-baseline-grid-with-notes.css

body {
  margin: 0;

  /* Step 1: Choose a font-family */
  font-family: Georgia, serif;

  /* Step 2: Choose a font size */
  font-size: 100%;

  /* Step 3: Choose a line height (baseline grid unit) */
  line-height: 1.5; /* 24 / 16 (target divided by current font size)*/

  /*Step 4: Show a visual baseline grid;*/
  background-image: linear-gradient(#0ff 1px, transparent 1px);  
  background-size: auto 1.5em; /*Match to line-height*/

  /* Step 5: Choose a typographic scale */
  /* 12, 14, 16, 18, 21, 24, 36, 48, 60, 72 */
}

/* Step 6: Style yo stuff! */

h1 {
  margin: 0;
  font-size: 3em; /* 
    48 / 16 = 3em
    target font size (chosen from typographic scale)
    is used for the numerator. The denominator is
    the _current_ font size for _this_ element (inherited
    from the font-size setting in the body).

    This line of code changes the font size for this
    element and therefore changes the denominator for the
    rest of the size calculations. */

  margin-top: 0.5em; /* 
    24 / 48 = 0.5em
    Again, the numerator is the target size (1 grid space)
    and the denominator is the _current_ font size for
    _this_ element – which was adjusted by the font-size
    attribute above. */

  line-height: 1; /* 
    48 / 48 = 1 
    The numerator is the target size (2 grid spaces,
    shouldn't be less than the calculated font size)
    and the denominator is the _current_ font size for
    _this_ element – which was adjusted by the font-size
    attribute above. Best practices for line-height
    dictate we use unitless numbers.
  */
}

ul {
  margin: 0;
  font-size: 0.75em; /* 12 / 16 */
  line-height: 2; /* 24 / 12 */
  margin-top: 4em; /* 48 / 12 */
}

h2 {
  margin: 0;
  font-size: 2.25em; /* 36 / 16 */
  line-height: 0.666666667; /* 24 / 36 */
  margin-top: 0.666666667em; /* 24 / 36 */
}