Back to Playbook

Typeface

Select a distinct typeface for headings to establish personality, and a clean sans-serif for body text to ensure readability.

Why it matters

Typography is the voice of your design. The choice of typeface influences how users perceive your brand—whether it's modern, traditional, playful, or serious. Beyond aesthetics, the right typeface ensures that content is legible and accessible across different devices and reading conditions.

Typeface Playground

Experiment with different font pairings to see how they affect the tone and readability of your content.

px
px
px
em

The Quick Brown Fox

Jumps over the lazy dog

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking).

Recommended Pairings

Stuck? Try these proven font combinations to get started.

Modern Geometric

Montserrat + Open Sans

Clean & Structured
Great for tech startups and modern dashboards.

Elegant Editorial

Playfair Display + Lato

Classic & Refined
Perfect for fashion, luxury, or storytelling.

Bold Industrial

Oswald + Inter

Strong & Impactful
Ideal for marketing headers and data-heavy apps.

Friendly Humanist

Ubuntu + Nunito

Warm & Approachable
Works well for education, food, or community apps.

Tech Display

Space Grotesk + DM Sans

Future Forward
Ideal for SaaS, crypto, and modern tech brands.

Traditional Serif

Crimson Text + Work Sans

Timeless & Trustworthy
Perfect for journalism, law, and academic sites.

Condensed Impact

Barlow + Roboto

Loud & Clear
Great for sports, automotive, and heavy data.

Slab & Clean

Zilla Slab + Manrope

Distinct & Readable
Works well for blogs, portfolios, and creative agencies.

Selection Criteria

Legibility

Characters should be distinct and easy to recognize, even at small sizes.

Versatility

Look for families with multiple weights (Light, Regular, Bold) and styles (Italic).

Language Support

Ensure the typeface supports all the languages and special characters you need.

Screen Optimization

Choose fonts that render well on screens, with open counters and good x-height.

Pairing Checklist

  1. Contrast

    Pair a serif heading with a sans-serif body for clear visual distinction.

  2. Mood Match

    Ensure both typefaces convey a compatible mood or personality.

  3. Limit Choices

    Stick to 1 or 2 typefaces max to maintain performance and visual cohesion.

Previous: Overview Next: Type Scale