Encode Fluid Font Sizes as Design Tokens

The most direct approach: run the tool per role, rename --font-size-fluid to the role name, and collect them in one :root. Components reference var(--font-size-*).

:root {
  --font-size-display: clamp(2.000rem, 1.333rem + 3.333vw, 4.000rem);
  --font-size-heading: clamp(1.500rem, 1.167rem + 1.667vw, 2.500rem);
  --font-size-body:    clamp(1.000rem, 0.958rem + 0.208vw, 1.125rem);
}

h1 { font-size: var(--font-size-display); }
h2 { font-size: var(--font-size-heading); }
p  { font-size: var(--font-size-body); }

Drop the generated clamp() string in as the token value. Style Dictionary passes it through to the CSS platform unchanged — it is just an opaque value.

{
  "font": {
    "size": {
      "display": { "value": "clamp(2.000rem, 1.333rem + 3.333vw, 4.000rem)" },
      "heading": { "value": "clamp(1.500rem, 1.167rem + 1.667vw, 2.500rem)" },
      "body":    { "value": "clamp(1.000rem, 0.958rem + 0.208vw, 1.125rem)" }
    }
  }
}

Each theme is its own pass of the four inputs. Scope the resulting :root to a data attribute so the active theme picks the right clamp().

/* default theme */
:root { --font-size-body: clamp(1.000rem, 0.958rem + 0.208vw, 1.125rem); }

/* compact: smaller max (16 → 17 instead of 16 → 18) */
[data-theme="compact"] {
  --font-size-body: clamp(1.000rem, 0.979rem + 0.104vw, 1.063rem);
}

/* comfortable: larger max (16 → 20) */
[data-theme="comfortable"] {
  --font-size-body: clamp(1.000rem, 0.917rem + 0.417vw, 1.250rem);
}

For CI, replicate buildClampExpression and iterate your role matrix — no copy-paste, deterministic output, clean diffs.

function clamp(minPx, maxPx, minVw, maxVw, root = 16) {
  const slope = (maxPx - minPx) / (maxVw - minVw);
  const vw = slope * 100;
  const intercept = (minPx - slope * minVw) / root;
  const s = vw >= 0 ? '+' : '-';
  return `clamp(${(minPx/root).toFixed(3)}rem, ${intercept.toFixed(3)}rem ${s} ${Math.abs(vw).toFixed(3)}vw, ${(maxPx/root).toFixed(3)}rem)`;
}

const roles = {
  display: [32, 64, 320, 1280],
  heading: [24, 40, 320, 1280],
  body:    [16, 18, 320, 1280],
};
for (const [name, args] of Object.entries(roles))
  console.log(`--font-size-${name}: ${clamp(...args)};`);

If you only need one fluid token, the generator's :root output is already usable — just rename the variable.

/* Tool output, verbatim */
:root { --font-size-fluid: clamp(2.000rem, 1.333rem + 3.333vw, 4.000rem); }

/* Renamed to your role token */
:root { --font-size-display: clamp(2.000rem, 1.333rem + 3.333vw, 4.000rem); }

Every run writes --font-size-fluid, not a per-role name. For a token set you must rename it per role after copying, or replicate the math in a script that names tokens itself. The generator has no field for the variable name — it is single-purpose.

Tokens generated here divide Min px by 16 for the rem floor. If your design system's root is not 16, the rem token values will not visually equal the px you intended. Standardise the root at 16 (the common default) so the tokens are accurate, or convert with your real root in a custom script.

Nothing stops you giving each role a different Min vw / Max vw, but mixed ranges make a token set harder to reason about (display caps at 1440, body at 768). Most systems pick one global viewport range and vary only min/max px per role. Consistency wins; vary the size, not the range.

When you regenerate a token for a 'comfortable' theme with a bigger Max px, the clamp() ceiling rises automatically — good. But if you only change the intercept by hand instead of regenerating, the ceiling stays at the old value and the size caps early. Always regenerate the full clamp() per theme rather than editing one term.

Style Dictionary does not parse or validate the clamp() — it passes the string through to the web platform. That means a malformed expression (e.g. one you hand-edited) ships unchecked. Generate the value here so it is well-formed, and let the tool's .toFixed(3) rounding keep it clean.

Generating any single role token throws Max viewport must be greater than min viewport. if Max vw ≤ Min vw. In a token matrix this usually means a typo in one row — fix that row's viewport range before regenerating.

If a role's Max px is below its Min px (a data-entry slip in the matrix), the token clamp() gets a negative vw slope and the text shrinks as the screen grows. The tool does not reject this — review each generated token to confirm Max px > Min px for every role.

clamp() is a CSS function; iOS/Android UI layers have no equivalent. A token whose value is a clamp() string is web-only. For cross-platform tokens, store the min/max px and viewport range as raw numbers and let each platform's build compute its own responsive sizing — the web build can still call this tool's math.

If you actually want a modular scale (every step from xs to 4xl) as fluid tokens, this single-size generator is the wrong tool — you would run it many times. The typography-scale-builder emits a fluid clamp() per step in one pass, ready to tokenise.