<div>
  <p>Change your viewport size to see how the relative proportions of large and small type adjust.</p>
  <h1>Heading text&nbsp;size</h1>
  <h2>Heading text&nbsp;size</h2>
  <h3>Heading text&nbsp;size</h3>
  <h4>Heading text&nbsp;size</h4>
  <h5>Heading text&nbsp;size</h5>
  <h6>Heading text&nbsp;size</h6>
</div>

@use cssnext;

html {
  background: #00000011;
}

/**
 * Ratio and base variables
 */

:root {
  --ratio: 1.2;
  --base: 1;
  --base-em: calc(var(--base) * 1em);
  --base-px: calc(var(--base) * 16px);
}

/**
 * Scale step variables
 */

:root {
  --ms0: 1;
  --ms1: var(--ratio);                    /* 1.2   */
  --ms2: calc(var(--ratio) * var(--ms1)); /* 1.44  */
  --ms3: calc(var(--ratio) * var(--ms2)); /* 1.728 */
  --ms4: calc(var(--ratio) * var(--ms3)); /* 2.074 */
  --ms5: calc(var(--ratio) * var(--ms4)); /* 2.488 */
  --ms6: calc(var(--ratio) * var(--ms5)); /* 2.986 */
  --ms7: calc(var(--ratio) * var(--ms6)); /* 3.583 */
}

/**
 * Resets
 */

* + * {
  margin-top: calc(1rem / var(--ms1));
}

/**
 * Default font sizes
 */

body {
  font-size: calc(var(--base-em) * var(--ms0));
  line-height: calc(var(--base) * var(--ms2));
  max-width: 40em;
}

h6 { font-size: calc(var(--base-em) / var(--ms1)); }
h5 { font-size: calc(var(--base-em) * var(--ms0)); }
h4 { font-size: calc(var(--base-em) * var(--ms1)); }
h3 { font-size: calc(var(--base-em) * var(--ms2)); }
h2 { font-size: calc(var(--base-em) * var(--ms3)); }
h1 { font-size: calc(var(--base-em) * var(--ms4)); }

h3, 
h2 { line-height: calc(var(--base) * var(--ms1)); }
h1 { line-height: calc(var(--base) * var(--ms0)); }

/**
 * Proportional increments 
 */

@media (min-width: 480px) {
  html { font-size: calc(var(--base-px) * var(--ms1)); }
}

@media (min-width: 768px) {
  h3 { font-size: calc(var(--base-em) * var(--ms3)); }
  h2 { font-size: calc(var(--base-em) * var(--ms4)); }
  h1 { font-size: calc(var(--base-em) * var(--ms5)); }
}

@media (min-width: 1024px) {
  h2 { font-size: calc(var(--base-em) * var(--ms5)); }
  h1 { font-size: calc(var(--base-em) * var(--ms6)); }
}

@media (min-width: 1360px) {
  html { font-size: calc(var(--base-px) * var(--ms2)); }
  h1 { font-size: calc(var(--base-em) * var(--ms7)); }
}

/**
 * Utility classes
 */

.u-textBigger { 
  font-size: calc(var(--base-em) * var(--ms1)); 
}

.u-textSmaller { 
  font-size: calc(var(--base-em) / var(--ms1)); 
}