Typography

Our typography system uses Zodiak for headings and Figtree for body text.

Font Families

Zodiak Font Family (Headings)

The quick brown fox

Zodiak Bold - 48px

The quick brown fox

Zodiak Medium - 36px

The quick brown fox

Zodiak Regular - 30px

The quick brown fox

Zodiak Italic - 24px

Figtree Font Family (Body)

The quick brown fox jumps over the lazy dog

Figtree Bold - 20px

The quick brown fox jumps over the lazy dog

Figtree Medium - 18px

The quick brown fox jumps over the lazy dog

Figtree Regular - 16px

The quick brown fox jumps over the lazy dog

Figtree Regular - 14px

Font Pairing Example

Design System Typography

Typography is a critical element of any design system. It establishes hierarchy, improves readability, and creates visual harmony.

With our Zodiak and Figtree pairing, we've created an elegant contrast between the refined serif headings and the clean, readable sans-serif body text.

Key Typography Principles

  • Maintain consistent type scale across products
  • Ensure sufficient contrast for readability
  • Use appropriate line heights for comfortable reading
  • Consider responsive behavior across devices

Type Scale

Heading 1

font-size: 2.5rem (40px), font-weight: 700

Heading 2

font-size: 1.875rem (30px), font-weight: 700

Heading 3

font-size: 1.5rem (24px), font-weight: 700

Heading 4

font-size: 1.25rem (20px), font-weight: 700

Body (Base)

font-size: 1rem (16px), font-weight: 400

Small

font-size: 0.875rem (14px), font-weight: 400

Extra Small

font-size: 0.75rem (12px), font-weight: 400

Typography Guidelines

Heading Usage

Use Zodiak for all headings (h1-h6). Maintain proper hierarchy with appropriate font sizes and weights.

  • H1: Page titles, hero sections
  • H2: Major section headings
  • H3: Subsection headings
  • H4-H6: Minor headings and emphasized content

Body Text

Use Figtree for all body text, paragraphs, lists, and UI elements. The base font size is 16px (1rem).

  • Maintain a line height of 1.5-1.7 for optimal readability
  • Use appropriate font weights to create hierarchy
  • Ensure sufficient contrast between text and background

Responsive Typography

Our typography system is responsive and adjusts based on screen size:

  • Mobile: Base size may reduce to 14px
  • Heading sizes scale proportionally across breakpoints
  • Line lengths should be optimized for readability (45-75 characters)