Type Scale

index.html

<h1>A Visual Type Scale (h1)</h1>
<h2>A Visual Type Scale (h2)</h2>
<h3>A Visual Type Scale (h3)</h3>
<h4>A Visual Type Scale (h4)</h4>
<h5>A Visual Type Scale (h5)</h5>
<h5>A Visual Type Scale (h5)</h5>
<h6>A Visual Type Scale (h6)</h6>
<p>A Visual Type Scale (p)</p>
<small>A Visual Type Scale (small)</small>

playground.json

{
  "scripts": [],
  "styles": []
}

script.ts

console.log('hello world')

style.scss

// Source: https://type-scale.com/
@import url('https://fonts.googleapis.com/css?family=Poppins:400');

html {font-size: 100%;} /*16px*/

body {  
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.65;
  color: #333;
}

p {margin-bottom: 1.15rem;}

h1, h2, h3, h4, h5, h6 {
  margin: 2.75rem 0 1.05rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.15;
}

h1 {
  margin-top: 0;
  font-size: 1.383em;
}

h2 {font-size: 1.296em;}

h3 {font-size: 1.215em;}

h4 {font-size: 1.138em;}

h5 {font-size: 1.067em;}

h6 {font-size: 1em;}

small, .text_small {font-size: 0.937em;}