Fontista

Choosing a font

The right typeface depends on what you are building. This guide covers use cases, categories, and the practical limits of size, pairing, performance, and accessibility. You can browse all fonts or open your favorites in the library.

By use case

SaaS applications

Primary
Inter, Poppins, Roboto
Secondary
Lato, IBM Plex Sans
Why
Neutral, open shapes stay readable at small interface sizes.

Tech startups

Primary
Inter, JetBrains Mono, Fira Code
Secondary
Space Grotesk, IBM Plex Sans
Why
Geometric and monospace faces give product UI a technical character.

Corporate business

Primary
Roboto, Lato, IBM Plex Sans
Secondary
Source Sans Pro, Libre Franklin
Why
Established humanist families work across print and screen.

Blogs and content

Primary
Merriweather, Lora, Playfair Display
Secondary
Crimson Text, IBM Plex Serif
Why
Serifs with generous x-heights keep long articles comfortable.

Mobile apps

Primary
Inter, Roboto, Poppins
Secondary
Ubuntu, IBM Plex Sans
Why
Compact apertures and tall x-heights survive small screens.

Code and technical

Primary
Fira Code, JetBrains Mono, Source Code Pro
Secondary
IBM Plex Mono, Inconsolata
Why
Fixed-width columns keep code and indentation aligned.

Font categories

Sans-serif

Letters without finishing strokes. Suited to interfaces, dashboards, and applications where clarity at small sizes matters.

InterPoppinsRobotoIBM Plex Sans

Serif

Letters with finishing strokes. Suited to long-form reading, editorial layouts, and traditional brands.

MerriweatherPlayfair DisplayIBM Plex SerifLora

Monospace

Fixed-width letters. Built for code, terminal output, and technical documentation.

Fira CodeJetBrains MonoSource Code ProIBM Plex Mono

Typography basics

Size and scale

  • Set body text at 16px or larger.
  • Use a line height near 1.5 for body copy.
  • Keep a fixed heading scale, for example a 1.25 ratio, instead of arbitrary sizes.
  • Increase sizes on touch interfaces.

Pairing

  • Two families are usually enough. Three is the practical maximum.
  • Combine a sans-serif with a serif for contrast.
  • Build hierarchy with weight and size before adding another family.
  • Test the pairing on real devices.

Performance

  • Use font-display: swap so fallback text shows during loading.
  • Subset fonts to the character sets you need.
  • Ship WOFF2 for the smallest files.
  • Preload the fonts used above the fold.

Accessibility

  • Keep contrast at 4.5:1 for normal text and 3:1 for large text.
  • Avoid decorative faces for important information.
  • Test with a screen reader.
  • Check coverage of the character sets your product needs.