Type scale css

type-rhythm.css

:root {
  --base: 18px;
  --rhythm: 32px;
  --scale-factor: .48;
}
  
body, h1, h2, h3, h4, h5, h6 {
    font-size: calc( var(--base) + (var(--base) * var(--scale-factor) * var(--font-increase, 0)));
    line-height: calc(var(--rhythm) + (var(--rhythm) * var(--rhythm-increase, 0)));
}

h1, h2, h3, h4, h5, h6 {
    margin: calc(var(--rhythm) * 2) 0 var(--rhythm);
}

h1 {
    --font-increase: 5;
    --rhythm-increase: 1;
}

h2 {
    --font-increase: 4;
    --rhythm-increase: 1;
}

h3 {
    --font-increase: 3;
    --rhythm-increase: 1;
}

h4 {
    --font-increase: 2;
    --rhythm-increase: .5;
}

h5 {
    --font-increase: 1;
}