typesettings-ms-example.scss

typesettings-ms-example.scss

$ms-ratio: 1.125; // This ratio, for example, will give you smaller variations between modular scale values. 

$ms-down1: $base-em-font-size / $ms-ratio;
$ms-down2: $ms-down1 /$ms-ratio;
$ms-down3: $ms-down2 / $ms-ratio;
$ms-up1: $base-em-font-size * $ms-ratio; 
$ms-up2: $ms-up1 * $ms-ratio;
$ms-up3: $ms-up2 * $ms-ratio;
$ms-up4: $ms-up3 * $ms-ratio;

  h1, .h1 {
    margin-bottom: emRhythm(4, $ms-up4);
    @include setType(6, $ms-up4);
  }

  h2, .h2 {
    margin-bottom: emRhythm(8, $ms-up3);
    @include setType(5, $ms-up3); // A size down from the h1
  }

  h3, .h3 {
    margin-bottom: emRhythm(4, $ms-up2);
    @include setType(5, $ms-up2); // A size down from the h2, but not as dramatic as the default ratio of 1.414
  }

  h4, .h4 {
    margin-bottom: emRhythm(4, $ms-up1);
    @include setType(5, $ms-up1);
  }

  h5, .h5,
  h6, .h6 {
    margin-bottom: emRhythm(4);
    @include setType(4);
  }