How to system font stack vs custom web font: when to pick which
- Step 1Pure system stack — GitHub, Medium, Stack Overflow, IndieHackers. Body text is the dominant surface; readability and performance > brand. Total font payload: 0 bytes.
- Step 2Pure custom web font — Apple, Stripe, Airbnb, fashion brands. Brand identity is essential; web fonts are part of the value proposition. Payload: 100–500 KB.
- Step 3Hybrid — Most modern SaaS (Linear, Notion, Vercel). System stack for body text; custom web font for headlines. Total font payload: 30–80 KB. Best balance of performance and brand.
Frequently asked questions
Won't users notice the brand inconsistency on each OS?+
Most don't. Designers and brand teams notice; everyone else doesn't. If your audience is brand-savvy creatives, custom fonts may be worth it. For general consumers, system stacks win on performance and the brand inconsistency is invisible.
What about logo typography?+
Always custom (often as SVG path, not font-based). Logos are critical brand assets and should be pixel-perfect. The body-text font choice is independent.
Is the hybrid approach always the right choice?+
Often, but not always. Pure system can win for performance-obsessed text-heavy sites. Pure custom can win for luxury brands where every text surface matters. The hybrid is a good default but not universal.
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.