Best-of-best font recommendations (practical)
- Best default (UI + performance): Inter variable (UI) + optional Source Serif 4 for long reading.
- System-first (fastest): system-ui stack only (no web font), limit weights (400/600/750).
- Accessibility-forward option: Atkinson Hyperlegible for dense UI (test; it’s opinionated).
- Rule: 1 UI font + optional 1 reading font. More fonts increase load + inconsistency.
Font performance rules (non-negotiable)
- Prefer variable fonts (fewer files).
- Self-host WOFF2, subset languages, use font-display: swap.
- Don’t ship 9 weights. Ship 2–3 (e.g., 400 / 600 / 750).
- Avoid layout shift: stable fallbacks + similar metrics.
Color, Contrast, Backgrounds, States
There is no universal “best CTA color”. The consistent winner is contrast and distinctiveness. Your CTA must be the most visually dominant element, while staying accessible.