<main>
  <section>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </section>
</main>

:root {
  --font-size: 1rem; // Base font size
  --ratio: 1.333; // Ratio for font scale

  // Loop to create CSS font size variables
  // based on Perfect Fourth scale
  @for $i from 1 through 9 {
    @if $i == 1 {
      --fs--#{$i}00: var(--font-size);
    } @else {
      --fs--#{$i}00: calc(var(--fs--#{$previous--fs}00) * var(--ratio));
    }

    $previous--fs: $i;
  }
}

// Styles
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  background-color: #0ac2a1;
  font-size: var(--fs--200);
  color: #FFFFFF;
}

main {
  width: clamp(200px, 50%, 500px);
  padding: 1em 2em;
  color: #ffffff;
  background-color: #0d352e;
  border-radius: 5px;
  box-shadow: 0 4px 8px 3px rgba(0,0,0,0.3);
}

h1, h2, h3, h4, h5 {
  margin: 0 0 1rem;
}

h1 {
  font-size: var(--fs--600);
}
h2 {
  font-size: var(--fs--500);
}
h3 {
  font-size: var(--fs--400);
}
h4 {
  font-size: var(--fs--300);
}
h5 {
  font-size: var(--fs--200);
}

p {
  margin: 0 0 1rem;
  
  &.small {
    font-size: var(--fs--100);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.