re fonts

by John Allan

HTML

<div class="re-h6">
Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut labore et dolore magna aliqua veniam, quis nostrud exercitation ullamcorpo.
</div>

<div class="re-base">
Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut labore et dolore magna aliqua veniam, quis nostrud exercitation ullamcorpo.
</div>

<div class="re-h5">
Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut labore et dolore magna aliqua veniam, quis nostrud exercitation ullamcorpo.
</div>

<div class="re-h4">
Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut labore et dolore magna aliqua veniam, quis nostrud exercitation ullamcorpo.
</div>

<div class="re-h3">
Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut labore et dolore magna aliqua veniam, quis nostrud exercitation ullamcorpo.
</div>

<div class="re-h2">
Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut labore et dolore magna aliqua veniam, quis nostrud exercitation ullamcorpo.
</div>

<div class="re-h1">
Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut labore et dolore magna aliqua veniam, quis nostrud exercitation ullamcorpo.
</div>

<div class="re-xl">
Lorem ipsum dolor sit amet.
</div>

<div class="re-xxl">
Lorem ipsum dolor sit amet.
</div>

<div class="re-xxxl">
Lorem ipsum dolor sit amet.
</div>

CSS

body {
  font-family: "Open sans";
  line-height: 1.5
}

.re-h6 { font-size: 13px; margin-bottom: 19.5px;  }
.re-base  { font-size: 15px; margin-bottom: 22.5px; }
.re-h5 { font-size: 18px; margin-bottom: 27px; }
.re-h4 { font-size: 21px; margin-bottom: 31.5px; }
.re-h3 { font-size: 24px; margin-bottom: 36px; }
.re-h2 { font-size: 30px; margin-bottom: 45px; }
.re-h1 { font-size: 36px; margin-bottom: 54px; }

.re-xl { font-size: 45px; margin-bottom: 67.5px; }
.re-xxl { font-size: 55px; margin-bottom: 82.5px; }
.re-xxxl { font-size: 65px; margin-bottom: 97.5px; }