In frontend design, you need to avoid commonplace designs (distributional convergence) and choose high-quality, intentional typography.
Basic Principles
Typography instantly communicates quality. Avoid using boring, generic fonts.
Fonts to Never Use
- Inter, Roboto, Open Sans, Lato
- Default system fonts (sans-serif, Arial, etc.)
Recommended Impactful Options
- Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
- Editorial: Playfair Display, Crimson Pro
- Technical: IBM Plex family, Source Sans 3
- Distinctive: Bricolage Grotesque, Newsreader
Styling Guidelines
- Pairing principle:"High contrast = interesting." Combine Display + Monospace, Serif + Geometric Sans, variable fonts with different weights, etc.
- Use of extreme values: For weights, differentiate with values like 100/200 vs 800/900 rather than 400 vs 600. For sizes, aim for jumps of 3x or more rather than 1.5x.
- Decisive choice: Choose one distinctive font and use it resolutely.
Implementation
- Always generate code so that fonts are loaded from Google Fonts .