A Type Scale

In this example below you will see how to do a A Type Scale with some HTML / CSS and Javascript

Custom type scale and CSS from http://type-scale.com

Thumbnail
This awesome code was written by taurean, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright taurean ©
  • HTML
  • CSS
  • JavaScript
    <p class="display display-masthead">Aa Bb Cc 123 <span class="label">masthead</span> </p>
<p class="display display-9">Aa Bb Cc 123 <span class="label">9</span> </p>
<p class="display display-8">Aa Bb Cc 123 <span class="label">8</span> </p>
<p class="display display-7">Aa Bb Cc 123 <span class="label">7</span> </p>
<p class="display display-6">Aa Bb Cc 123 <span class="label">6</span> </p>
<p class="display display-5">Aa Bb Cc 123 <span class="label">5</span> </p>
<p class="display display-4">Aa Bb Cc 123 <span class="label">4</span> </p>
<p class="display display-3">Aa Bb Cc 123 <span class="label">3</span> </p>
<p class="display display-2">Aa Bb Cc 123 <span class="label">2</span> </p>
<p class="display display-1">Aa Bb Cc 123 <span class="label">1</span> </p>
<hr>
<p class="text text-1">Aa Bb Cc 123 <span class="label">1</span> </p>
<p class="text text-2">Aa Bb Cc 123 <span class="label">2</span> </p>
<p class="text text-3">Aa Bb Cc 123 <span class="label">3</span> </p>
<p class="text text-4">Aa Bb Cc 123 <span class="label">4</span> </p>
<p class="text text-5">Aa Bb Cc 123 <span class="label">5</span> </p>
<p class="text text-6">Aa Bb Cc 123 <span class="label">6</span> </p>
<p class="text text-7">Aa Bb Cc 123 <span class="label">7</span> </p>
<p class="text text-8">Aa Bb Cc 123 <span class="label">8</span> </p>
<p class="text text-9">Aa Bb Cc 123 <span class="label">9</span> </p>



/*Downloaded from https://www.codeseek.co/taurean/a-type-scale-PbKdEN */
    body {
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.display, .text {
  border-bottom: 0.1rem solid rgba(0,0,0, 0.15);
  display: block;
  padding: 1rem;
  position: relative;
}

.text {
  font-family: serif;
}

.display-1 {font-size: 1.40rem;}
.display-2 {font-size: 1.58rem;}
.display-3 {font-size: 1.78rem;}
.display-4 {font-size: 2.00rem;}
.display-5 {font-size: 2.25rem;}
.display-6 {font-size: 2.53rem;}
.display-7 {font-size: 2.85rem;}
.display-7 {font-size: 3.21rem;}
.display-8 {font-size: 3.61rem;}
.display-9 {font-size: 4.00rem;}
.display-masthead {font-size: 8.00rem;}

/* ///// */

.text-1 {font-size: 1.4rem;}
.text-2 {font-size: 1.3rem;}
.text-3 {font-size: 1.2rem;}
.text-4 {font-size: 1.1rem;}
.text-5 {font-size: 1.0rem;}
.text-6 {font-size: 0.9rem;}
.text-7 {font-size: 0.8rem;}
.text-8 {font-size: 0.7rem;}
.text-9 {font-size: 0.6rem;}

hr {
  height: 1.6rem;
  display: block;
  width: 100%;
  border: 0;
  background: rgba(0,0,0, 0.1)
}

.label {
  display: inline-block;
  position: aboslute;
/*   bottom: 0;
  right: 0; */
  top: 0;
  left: 0;
  padding: 0.5rem;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  background: rgba(0,0,0, 0.25);
}


/*Downloaded from https://www.codeseek.co/taurean/a-type-scale-PbKdEN */
    

Comments