How to adopt system stack as design system default for body
- Step 1Define the system stack — Sans-serif default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif. Save as --font-system-sans token.
- Step 2Apply to body — body { font-family: var(--font-system-sans); }. All non-display elements inherit. Custom font only applied where explicitly needed (h1–h3, brand callouts).
- Step 3Document and enforce — Pin in design system docs: 'System stack for body text. Custom web font (Inter / Brand X) for h1–h3 and the brand mark only.' CI lints CSS for font-family declarations that bypass the policy.
Frequently asked questions
Won't this make our brand look inconsistent?+
Headlines use the brand font — that's where users perceive brand. Body text in system fonts is widely accepted as a performance trade-off; users rarely notice or comment.
What about email and PDF?+
Email: prefer system stacks too (HTML email clients handle them well). PDF: hybrid via embedded brand fonts plus PDF's built-in fonts as fallback.
Should I extend to monospace?+
Yes — code blocks should use ui-monospace, SFMono-Regular, etc. Native monospace fonts render code beautifully without a download. Save your custom font budget for display surfaces.
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.