🏫
Obvious University
Website
  • 👋Welcome to Obvious University!
  • Strategy
    • Sprints
      • 1️⃣Map
      • 2️⃣Sketch
      • 3️⃣Decide
      • 4️⃣Prototype
      • 5️⃣Test
    • Benchmarking
    • Research
      • 1️⃣Research guide
      • 2️⃣How to recruit users
      • 3️⃣How to conduct an interview well
      • 4️⃣How to take notes
      • 5️⃣How to prep for remote research
      • 6️⃣How to throw a watch party
      • 7️⃣How to create artefacts
  • Working with Features
    • Building with AI
      • 1️⃣Understand the tech
      • 2️⃣Map your product
      • 3️⃣Build a proof of concept
      • 4️⃣LLM Inputs
      • 5️⃣LLM Responses
    • Building Help and Support
      • 1️⃣How to scope a support experience
      • 2️⃣How to design discovery for support
      • 3️⃣How to design a support centre
      • 4️⃣How to write good support articles
  • Product Design
    • Microcopy
      • 1️⃣How to write well
      • 2️⃣How to write phrases
      • 3️⃣How to write messages
      • 4️⃣How to create a voice
    • Typography
      • 1️⃣How to compose type
      • 2️⃣How to create a type scale
      • 3️⃣How to pick typefaces
      • 4️⃣How to pair typefaces
    • Design System
      • 1️⃣Introduction to design systems
      • 2️⃣How to audit a design system
      • 3️⃣How to run a design system pilot
      • 4️⃣How to set up a design foundation
      • 5️⃣How to build components
      • 6️⃣How to document a design system
      • 7️⃣How to enable adoption and govern a design system
    • Mobile Engineering
      • 1️⃣Trunk based development
      • 2️⃣Agile development terminology
      • 3️⃣Git commit messages
      • 4️⃣Code review and pull requests
      • 5️⃣Readings
  • Delivery
    • Project Management
    • Collaboration
  • Hiring and Growth
    • Growth
      • 1️⃣Design growth framework
      • 2️⃣How to give ongoing feedback
      • 3️⃣How to check-in every quarter
      • 4️⃣How to address underperformance
      • 5️⃣FAQs
    • Hiring and careers
      • 1️⃣The Hiring Process
      • 2️⃣Diverse and Inclusive Hiring
  • PEOPLE EXPERIENCE
    • Benefits and Perks
      • 1️⃣Paid time off
      • 2️⃣Insurance and healthcare
      • 3️⃣Continuing education
      • 4️⃣Speaking at conferences
    • Starting at Obvious
      • 1️⃣Introducing Obvious
      • 2️⃣Set up your workspace
      • 3️⃣Onboarding
      • 4️⃣Finances
      • 5️⃣Code of Conduct
    • Employment policies
      • 1️⃣Equal opportunity employment
      • 2️⃣At-will employment
      • 3️⃣Employee records and privacy
      • 4️⃣Prevention of sexual harassment
      • 5️⃣Drugs and alcohol
      • 6️⃣Fraternisation
      • 7️⃣Non-compete and non-solicitation
      • 8️⃣Non-disclosure
Powered by GitBook
On this page
  • 👋 Introduction
  • 1️⃣ Pairing Typefaces
  • 1️⃣ Pair fonts with different characteristics for visual interest
  • 2️⃣ Use distinct font styles to establish visual order
  • 3️⃣ Pair fonts that complement each other in tone or mood
  • 4️⃣ Prioritise readability when pairing fonts, especially for longer text
  • 5️⃣ Limit the number of fonts to maintain consistency and avoid visual clutter
  1. Product Design
  2. Typography

How to pair typefaces

PreviousHow to pick typefacesNextDesign System

Last updated 1 year ago

👋 Introduction

Some products use more than one typeface. This module tells you what to keep in mind when pairing typefaces.

1️⃣ Pairing Typefaces

1️⃣ Pair fonts with different characteristics for visual interest

Use fonts with different weights, styles, or serif/sans-serif variations.

Make sure to choose fonts with noticeable differences in style, weight, or structure in order to avoid a lack of distinction. For example, avoid pairing serif with serif.

2️⃣ Use distinct font styles to establish visual order

Use decorative or elaborate fonts for headings or titles, and more straightforward, readable fonts for body text.

Avoid using fonts with conflicting styles that create dissonance. For example, pairing an elegant script font with a heavy, blocky font may result in jarring contrast.

3️⃣ Pair fonts that complement each other in tone or mood

A modern sans-serif font may pair well with a clean, geometric serif font.

Be cautious about pairing fonts that convey conflicting moods or aesthetics. For instance, pairing a playful, whimsical font with a formal, business-oriented font may result in a mismatched design.

4️⃣ Prioritise readability when pairing fonts, especially for longer text

Ensure the combination can be easily read at different sizes and across devices.

Mixing fonts can add depth and interest, enhancing a design's overall aesthetic. But you must ensure that the typeface you choose for the body text is readable.

5️⃣ Limit the number of fonts to maintain consistency and avoid visual clutter

Two or three fonts are usually sufficient for most projects.

Test your font combination at various sizes and consider how it will appear on different devices or mediums to avoid poor scaling.

4️⃣