demo · v140

Typed Arithmetic

Drag the sliders. The headline below is sized by calc(base + scale * ratio) evaluated in CSS — with v140 you can divide a length by a length to get a unitless ratio. The result is shown live.

16
2
2.00
CSS Typed Arithmetic
:root {
  --base: 16px;
  --scale: 2em;
  /* v140: typed arithmetic — divide length by length, get a unitless number */
  --ratio: calc(80px / 40px);     /* 2 */
  --size: calc(var(--base) + var(--scale) * var(--ratio));
}
h1 { font-size: var(--size); }

see also