Typography
Our typography system provides consistent text styles and hierarchy.
Font Families
Heading Font
Font Family
Public Sans
Fallbacks
system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
Body Font
Font Family
Public Sans
Fallbacks
system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
Font Sizes
H1
3.052rem / 48.83px
font-h1
H2
2.441rem / 39.06px
font-h2
H3
1.953rem / 31.25px
font-h3
H4
1.562rem / 25px
font-h4
H5
1.25rem / 20px
font-h5
H6
1.125rem / 18px
font-h6
Body
1rem / 16px
font-base
Small
0.875rem / 14px
font-sm
Extra Small
0.8125rem / 13px
font-xs
Line Heights
Tight
1.25rem / 20px
leading-tight
Normal
1.5rem / 24px
leading-normal
Relaxed
1.75rem / 28px
leading-relaxed
Loose
2rem / 32px
leading-loose
Font Weights
Thin (100)
font-thin
Light (300)
font-light
Normal (400)
font-normal
Medium (500)
font-medium
Semibold (600)
font-semibold
Bold (700)
font-bold
Black (900)
font-black
Usage Guidelines
Headings
Use heading fonts (Public Sans) for all titles and headings. Maintain a clear hierarchy from H1 to H6.
Body Text
Use body fonts (Public Sans) for all paragraph text, labels, and general content.
Line Height
Use appropriate line heights for readability. Tight for headings, normal for body text, relaxed for long-form content.
Font Weights
Use font weights consistently. Bold for emphasis, semibold for subheadings, normal for body text.