<h2 class="headline headline--h2">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz<br/>
# 1234567890',.<>/?;':"[]{}-=_+!@#$%^&*()</h2>

<p>
Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
</p>

{{ page.inlinestyles }}
      

      @font-face {
  font-family: 'Circular';
  src: url('../fonts/circular/CircularXXWeb-Book.woff2') format('woff2'),
    url('../fonts/circular/CircularXXWeb-Book.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'Circular';
  src: url('../fonts/circular/CircularXXWeb-Black.woff2') format('woff2'),
    url('../fonts/circular/CircularXXWeb-Black.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: fallback;
}

      

      <h1 class="headline headline--h1">Headline 1</h1>
<h2 class="headline headline--h2">Headline 2</h2>
<h3 class="headline headline--h3">Headline 3</h3>
<h4 class="headline headline--h4">Headline 4</h4>
<h5 class="headline headline--h5">Headline 5</h5>
<h6 class="headline headline--h6">Headline 6</h6>

      

      .headline,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: $primary;
  font-family: $font-family-base;
  line-height: $headings-line-height;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1em;

  * {
    text-decoration: none;
  }

  &--h1,
  h1,
  .h1 {
    font-size: $h1-font-size;
    margin-bottom: 2.5rem;
  }

  &--h2,
  h2,
  .h2 {
    font-size: $h2-font-size;
    line-height: 1.278;
    margin-bottom: 1.5rem;
  }

  &--h3,
  h3,
  .h3 {
    font-size: $h3-font-size;
    line-height: 1.385;
    font-weight: normal;
    margin-bottom: 1.125rem;
  }

  &--h4,
  h4,
  .h4 {
    font-size: $h4-font-size;
    font-weight: normal;
    line-height: 1.333;
  }

  &--h5,
  h5,
  .h5 {
    font-size: $h5-font-size;
    font-weight: normal;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  &--h6,
  h6,
  .h6 {
    font-size: $h6-font-size;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.38px;
  }
}

h1,
.h1 {
  font-size: $h1-font-size;
  margin-bottom: 2.5rem;
}

h2,
.h2 {
  font-size: $h2-font-size;
  line-height: 1.278;
  margin-bottom: 1.5rem;
}

h3,
.h3 {
  font-size: $h3-font-size;
  line-height: 1.385;
  font-weight: normal;
  margin-bottom: 1.125rem;
}

h4,
.h4 {
  font-size: $h4-font-size;
  font-weight: normal;
  line-height: 1.333;
}

h5,
.h5 {
  font-size: $h5-font-size;
  font-weight: normal;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

h6,
.h6 {
  font-size: $h6-font-size;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.38px;
}

      

      <p><strong>Text 16px</strong></p>
<p class="text text--large">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<hr/>

<p><strong>Text 12px</strong></p>
<p class="text text--extra-small">The quick brown fox jumps over the lazy dog</p>
<br/>
<p><strong>Text 13px</strong></p>
<p class="text text--small">The quick brown fox jumps over the lazy dog</p>
<br/>
<p><strong>Text 14px</strong></p>
<p class="text">The quick brown fox jumps over the lazy dog</p>  
<br/>
<p><strong>Text 18px</strong></p>
<p class="text text--extra-large">The quick brown fox jumps over the lazy dog</p>  
      

      .text {
  color: $body-color;
  font-size: $font-size-base;
  line-height: $line-height-base;
  font-family: $font-family-sans-serif;
  font-weight:400;

  &--extra-small{
    font-size: $font-size-xs;
  }

  &--small{
    font-size: $font-size-sm;
  }

  &--large{
    font-size: $font-size-lg;
  }

  &--extra-large{
    font-size: $font-size-xl;
  }

  &--primary{
    color:$primary;
  }

  &--lower{
    text-transform: none !important;
  }

  &--small{
    font-size: $font-size-base;
    color: $body-color;
  }
}