Our typography system uses Zodiak for headings and Figtree for body text.
Zodiak Bold - 48px
Zodiak Medium - 36px
Zodiak Regular - 30px
Zodiak Italic - 24px
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
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.
font-size: 2.5rem (40px), font-weight: 700
font-size: 1.875rem (30px), font-weight: 700
font-size: 1.5rem (24px), font-weight: 700
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
Use Zodiak for all headings (h1-h6). Maintain proper hierarchy with appropriate font sizes and weights.
Use Figtree for all body text, paragraphs, lists, and UI elements. The base font size is 16px (1rem).
Our typography system is responsive and adjusts based on screen size: