<body class="golden">
   <div>
    <h5 class="golden">Golden Ratio (1.618)</h5>
    <hr>
    <h1 class="golden">H1</h1>
    <h2 class="golden">H2</h2>
    <h3 class="golden">H3</h3>
    <h4 class="golden">H4</h4>
    <h5 class="golden">H5</h5>
    <p class="golden">p</p>
  </div>
</body>

<body class="small">
   <div>
    <h5 class="small">Ratio (1.3)</h5>
    <hr>
    <h1 class="small">H1</h1>
    <h2 class="small">H2</h2>
    <h3 class="small">H3</h3>
    <h4 class="small">H4</h4>
    <h5 class="small">H5</h5>
    <p class="small">p</p>
  </div>
</body>
html, .root {
  font-size: 16px;
  line-height: 24px;
}

div {
  float:left;
  margin-right: 5em;
}

hr, .hr {
  border: 1px solid;
  margin: -1px 0;
}

/* Golden Ratio */

body.golden {
  font-family: sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  max-width: 560px;
  margin: auto;
}
h1.golden {
  font-size: 4.25em;
  line-height: 1.05882353em;
  margin-top: 0.35294118em;
  margin-bottom: 0.70588236em;
}
h2.golden {
  font-size: 2.625em;
  line-height: 1.14285714em;
  margin-top: 0.57142857em;
  margin-bottom: 0.57142857em;
}
h3.golden {
  font-size: 1.625em;
  line-height: 1.84615385em;
  margin-top: 0.92307692em;
  margin-bottom: 0em;
}
h4.golden {
  font-size: 1em;
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 0em;
}
h5.golden {
  font-size: 1em;
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 0em;
}
p.golden {
  margin-top: 0em;
  margin-bottom: 1.5em;
}

/* Smaller Ratio */

body.small {
  font-family: sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  max-width: 560px;
  margin: auto;
}
h1.small {
  font-size: 2.1875em;
  line-height: 1.37142857em;
  margin-top: 0.68571429em;
  margin-bottom: 1.37142858em;
}
h2.small {
  font-size: 1.6875em;
  line-height: 1.77777778em;
  margin-top: 0.88888889em;
  margin-bottom: 0.88888889em;
}
h3.small {
  font-size: 1.3125em;
  line-height: 1.14285714em;
  margin-top: 1.14285714em;
  margin-bottom: 0em;
}
h4.small {
  font-size: 1em;
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 0em;
}
h5.small {
  font-size: 1em;
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 0em;
}
p.small {
  margin-top: 0em;
  margin-bottom: 1.5em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.