How to generate css custom properties for typography
- Step 1Set family + base size — Family name (Inter, Roboto, etc.) and base size (16px is the typical default). Generator builds a tokens block scoped to :root.
- Step 2Pick a scale ratio — Modular ratio (Major Third 1.25 is common). Generator computes xs/sm/base/lg/xl/2xl/3xl sizes from base × ratio^n.
- Step 3Copy the output — Output is a :root { --font-family-base: ...; --font-size-base: 1rem; --font-size-lg: 1.25rem; ... } block. Reference via var(--font-size-base) in your CSS.
Frequently asked questions
Why custom properties instead of Sass variables?+
Runtime mutation (theming), inheritable scoping, no build step required. Sass variables compile away; CSS custom properties exist in the browser and respond to media queries (dark mode), JavaScript, and DOM scope changes.
Should I include line-height tokens?+
Yes. Tight (1.2 for headlines), Snug (1.375), Normal (1.5 for body), Relaxed (1.625), Loose (2.0). Pin these as tokens; components reference by intent rather than hard-coding numbers.
What about letter-spacing?+
Same approach: --letter-spacing-tighter (-0.05em), tight (-0.025em), normal (0), wide (0.025em), wider (0.05em). Use for headlines and small caps where tracking adjustments matter.
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.