How to build a modular typography scale with fluid clamp()
- Step 1Set base size — Typically 16px (the browser default). Some designs use 18px for content-heavy pages or 14px for dense UI.
- Step 2Pick a ratio — Subtle: Minor Second (1.067), Major Second (1.125). Common: Major Third (1.25), Perfect Fourth (1.333). Dramatic: Perfect Fifth (1.5), Golden Ratio (1.618). Match the ratio to design tone.
- Step 3Configure steps and viewport — Steps: 6–10 typical. Origin: where the base sits within the steps (default 2 → produces xs, sm, base, lg, xl, 2xl). Fluid viewport: typically 320–1280px or 320–1440px.
Frequently asked questions
Which ratio should I pick?+
Minor Third (1.2): subtle, body-text-heavy sites. Major Third (1.25): popular default. Perfect Fourth (1.333): expressive, editorial. Golden Ratio (1.618): dramatic, headline-focused. Match to design tone.
What's the difference between static and fluid scale?+
Static: rem-based, doesn't change with viewport. Fluid: clamp()-based, interpolates between min and max sizes as viewport widens. Fluid is the modern default; static is backup for sites that need exact sizing.
Why 'origin' parameter?+
Defines where the base size sits within the scale. Origin 0: base is the smallest. Origin 2: base sits in the middle (xs/sm/base/lg/xl/2xl). Adjust based on whether you need more sizes below or above the base.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.