Vertical rhythm mixin

vertical-rhythm.scss

// Throw a font size into this mixin and get optimal line heights and top/bottom margins.
// Adjustable variables to fine-tune.

@mixin vertical-rhythm($size) {

  $st:  12px; // Smallest text size
  $sh:  140%; // Optimal line height for smallest text size
  $lt:  70px; // Largest text size
  $lh:  100%; // Optimal line height for largest text size

  $text-size-percent: ($size - $st)/($lt - $st) * 100;
  $new-line-height: $sh - ((($sh - $lh) * $text-size-percent) / 100);

  font-size: $size; // Omit if you want to set font size somewhere else
  line-height: $new-line-height;
  margin: (48px/$size)*4px 0;

};