<div>
<h1>
  I'm h1 heading and my font-size is 3rem.
  </h1>
  <h2>
    I'm a h2 heading and my font-size is 2.75rem.
</h2>
  <h3>
    I'm a h3 heading and my font-size is 2.25rem.
  </h3>
  <h4>
      I'm a h4 heading and my font-size is 2 rem.
  </h4>
</div>
@use cssnext;
:root {
  --fontSize: 1rem;
  --font-family: sans-serif;
  --padding: 1em;
}

body {
  font-family: var(--font-family);
  padding-left: var(--padding);
}

h1 {
  font-size: calc(var(--fontSize) * 3);
}

h2 {
  font-size: calc(var(--fontSize) * 2.75);
}

h3 {
  font-size: calc(var(--fontSize) * 2.25);
}

h4 {
  font-size: calc(var(--fontSize) * 2);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.