SCSS Vertical Rhythm

index.html

<section>
  <span class="h0">Huge</span>
  <h1>Main Heading</h1>
  <h2>Second Heading may be long enough to wrap on a few lines but the funny thing is that the spacing is consistent</h2>
  <h3>Heading Three</h3>
  <h4>Heading Four</h4>
  <h5>Heading Five</h5>
  <h6>Heading Six</h6>
</section>

scss-vertical-rhythm.markdown

SCSS Vertical Rhythm

A Pen by Matthew Daniel Brown on CodePen.

License.

style.scss

$baseline-unit:         12px                !default;
$baseline-debug:        true               !default;

@mixin baseline($baseline-font-size: 16px, $baseline-line-height: 1.25, $cap-height-ratio: 0.68, $margin-bottom: 3rem) {

    $baseline-distance: ($baseline-line-height - $cap-height-ratio) / 2;

    // set the proper font-size and line-height to size the element in multiples of baseline units
    font-size: ($baseline-font-size / $baseline-unit) * 1rem;
    line-height: $baseline-line-height;

    padding-top: calc(1rem - #{$baseline-distance * 1em});
    padding-bottom: calc(1rem - #{$baseline-distance * 1em});
    margin-bottom: calc(#{$margin-bottom} - 2rem);

    @if $baseline-debug == true {
        position: relative;

        &:before,
        &:after {
            content: "";

            position: absolute;
            top: calc(100% - 1rem);
            left: 0;
            z-index: -1;

            width: 100%;
            height: $margin-bottom;

            background: rgba(0, 128, 255, 0.25);
        }

        &:before {
            background: white;
            top: 1rem;
        }
    }
}

$cap-size-font-headings: 0.7;

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

section {
  max-width: 40em;
  padding: 4rem;
  margin: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

.h0 {
    display: block;
    font-weight: bold;
    @include baseline(90px, 1, $cap-size-font-headings, 3rem);
    text-transform: uppercase;
}

h1 {
    @include baseline(60px, 1, $cap-size-font-headings, 3rem);
}

h2 {
    @include baseline(24px, 1.25, $cap-size-font-headings, 3rem);
}

h3 {
    @include baseline(16px, 1.25, $cap-size-font-headings, 3rem);
}

h4 {
    @include baseline(13px, 1.25, $cap-size-font-headings, 3rem);
}

h5,
h6 {
    @include baseline(13px, 15/13, $cap-size-font-headings, 2rem);
}