<div class="container">
  <h1 class="garter">Vertical Rhythm</h1>
  <h2 class="garter">サブタイトル</h2>
  <p class="garter">私は今まあこの専攻者に従ってものの以上にするなけれう。もっと十月を発見士はどうもその学習ですただけが考えるて行くべからには存在すわるたなけれから、突然にも閉じたたらました。亡骸を寄っん事しか単に昔をとやかくましである。</p>
  
  <h2 class="garter">サブタイトル</h2>
  <p class="garter">まるで木下さんが用意道徳たった意味を済ましまい個人この思い切り私か発展をってお説明でしなけれないでて、いわゆる時間はそれか空虚自分が使いこなすが、大森さんののに主義のあなたにはなはだご赴任と叫びて私兄をお演説を出ように何だかお安心が向いなかっですて、まあたとい立脚をいいありているます訳が云っないです。</p>
  
  <h3 class="garter">小見出し</h3>
  <p class="garter">大森さんののに主義のあなたにはなはだご赴任と叫びて私兄をお演説を出ように何だかお安心が向いなかっですて、まあたとい立脚をいいありているます訳が云っないです。</p>
</div>

<div class="grid">
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div class="line">&nbsp;</div>
</div>
@import "bourbon";

$base-line-height: 2rem;
$modular-scale-base: 1em;
$modular-scale-ratio: $golden;

@function vr($lines: 1){
  $line-height: $base-line-height * $lines;
  @return $line-height;
}

@mixin gl($lines: 1){
  margin-top:    $base-line-height * 2;
  margin-bottom: $base-line-height * 1;
  line-height:   $base-line-height * $lines;
}


body {
  padding: vr();
  
  line-height: vr();
}

h1 {
  margin-top:    vr(2);
  margin-bottom: vr(1);
  line-height:   vr(3);
  font-size: modular-scale(3);
}

h2 {
  margin-top:    vr(1);
  margin-bottom: vr(1);
  line-height:   vr(2);
  font-size: modular-scale(2);
}

h3 {
  margin-top:    vr(1);
  margin-bottom: vr(1);
  line-height:   vr(1);
  font-size: modular-scale(1);
}

p {
  margin-top:    vr(1);
  margin-bottom: vr(1);
  line-height:   vr(1);
  font-size: modular-scale(0);
}

.grid {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  .line {
    box-shadow: 0 1px 0 #eee;
    line-height: vr();
    font-size: 1rem;
  }
}

.garter {
  box-shadow: 0 1px 0 #ffaaaa,
              inset 0 1px 0 #ffaaaa;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.