type

Type is the system

One number per element — --type — sets its size, and from that same number the engine derives its leading, tracking, and weight. Spacing is a fraction of the line, so everything scales together. There are no pixel values to keep in sync.

One step, four outputs

sizefluid

A modular ratio to the power of the step, fluidly interpolated between a phone and a desktop base. One --cfg-ratio for the whole scale.

leadingline-height

Tightens as type grows, so display sizes don't sit on loose lines.

trackingletter-spacing

Negative at display sizes, a touch positive for small caps of text.

weightoptical

Climbs above step 0, so headings carry more weight without a second knob.

The live scale

measured from the DOM · try S/M/L above

Each row is a real element at that --type. The readout is its computed size / line-height / weight — so it reflects the shipped engine and the current data-ui-size, not a formula copy.

h1

Grumpy wizards

…

h2

Grumpy wizards

…

h3

Grumpy wizards

…

h4

Grumpy wizards

…

h5

Grumpy wizards

…

body

Grumpy wizards

…

small

Grumpy wizards

…

micro

Grumpy wizards

…

Spacing is a fraction of the line

Layout gaps are calc(0.25 · 1lh) and control padding is in em — both relative to the type around them. Bump a region's --type (or the header's S/M/L) and its rhythm grows with it. No spacing scale to maintain.

:where(.row, .column) { gap: calc(0.25 * 1lh); }
:where(button)        { padding: 0 0.8em; }   /* em → scales with --type */

Set a step, or zoom a region

--type is per-element (non-inheriting) — set it on one thing. --scale inherits, so it zooms a whole region (handy for a mini preview). data-ui-size reconfigures the base + ratio for the whole app.

<h2 style="--type:4">Heading</h2>
<small style="--type:-2">Micro caption</small>
<div style="--scale:0.6">…mini version…</div>

Because controls read the same scale, they stay one height. A field, button, select, and avatar all resolve to a single height at each --type — see Control heights for the live proof, and the Demos for the scale dressed up as three different products.