Clean structure · C.2

Size-tied negative tracking

Kerning a sign by eye. The bigger the letters, the more air you can see between them, so the more you take out.

Letter-spacing that tightens as the type grows, so a whole type scale looks set by one hand in one weight.

JavaScript is off, so the controls are hidden and the stage below shows a static field instead of the running effect. Every word on this page is still here. Nothing is hidden behind the script.

4 knobs

How it works

The reference uses one weight for every text element on the page. It still has a clear hierarchy, because size, width and tracking do all the work. Switch the mode to uniform and the display line goes loose while the body goes cramped. That mismatch is most of what makes a template look like a template.

Large type shows the default side-bearings as visible gaps, small type needs them. So tracking is a function of size: near -0.01em at body size, ramping linearly to a maximum (the reference uses -0.04em) at display size. Here it is computed per step as letter-spacing = -(0.01 + (max - 0.01) * t) em, where t is the step's position between 17px and the display size. Weight stays fixed, and a condensed width on the display steps carries the emphasis instead of bold.

The knobs, named

Mode, maximum tracking, display size and display width. All ours. The reference measured -0.04em at 125px, -0.03em at 66px and -0.01em at 17px, all at weight 400.

Knob	Source	What it teaches
Mode	ours	Uniform applies the maximum to every step, which crushes the body text. None leaves the display steps loose.
Max tracking	ours	Applied at the display size. The reference sits at 0.04em. Past 0.06em letters start to touch.
Display size	ours	The top step. The ramp is recomputed so every step between 17px and this one gets its share.
Display width	ours	font-stretch on the heading steps. A condensed display face is what lets one weight carry a hierarchy.

sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.

Evidence

VERIFIED (rendered)

Computed styles on fmjfuelpartner.com, 2026-10-15: h1 125px with letter-spacing -5px, h2 56px with -2.24px and 66px with -1.98px, body 17px with -0.17px and 15px with -0.15px; every measured text element at font-weight 400. The linear ramp is our formula fitted to those points.

Seen on: fmjfuelpartner.com (design study 2026-10-15).
Dependencies: vanilla CSS
Difficulty: easy
Performance: None.
Accessibility and the floor: Keep body tracking at or above -0.01em. Tight tracking at small sizes hurts reading, which is exactly what uniform mode shows. Nothing animates.

Where our build departs from the source: This playground has one variable font, so the two faces are its condensed and normal widths. The reference pairs two different families. The rule is the same; the contrast between faces is weaker here.

Notes

Composability. Feeds the heading in C.1 and every heading on a clean page. It is a token rule, not a component.

Put it in the type tokens as a calc on the size variable, not as a hand-set value per heading. With clamp() sizes (M.3), use em so the tracking follows the rendered size automatically.

Kicker and heading opener

Shaped section edge