font-family stacks: system-ui first

What "system-ui" gives you for free

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

Each entry is a fallback. The browser walks the list left-to-right and uses the first one available.

• -apple-system / BlinkMacSystemFont — San Francisco on Mac/iOS.
• Segoe UI — Windows.
• Roboto — Android / Chrome OS.
• Helvetica Neue — old Mac fallback.
• Arial — Windows fallback.
• sans-serif — last-resort generic family.

Modern CSS has the shorter system-ui keyword that maps to the OS's native UI font:

body { font-family: system-ui, sans-serif; }

That's 2 entries instead of 6, and works on every modern browser.

Why prefer the system font

• Zero download. No FOUT, no CDN hit, no Lighthouse penalty.
• Familiar to the user. Your site feels native to their OS.
• Hinted for the screen. Apple, Microsoft, Google spent millions making these readable at small sizes.

When to ship a custom font

• Brand identity (your logo or a hero headline).
• Specific aesthetic (serif for editorial, mono for code).
• Variable font that does work with one file (next lesson).

For body text on a SaaS product, system-ui is usually the right call.

Generic families

Always end your stack with a generic family:

• sans-serif — Helvetica-style
• serif — Times-style
• monospace — Courier-style
• system-ui — OS-specific UI font
• ui-monospace — OS-specific mono (SF Mono on Mac, Cascadia on Win, etc.)