Typography
Our typography system uses Noto Sans as the primary font family, with a consistent scale for sizes, weights, and line heights.
Font Sizes
text-xs
0.75rem
Extra small text
text-sm
0.875rem
Small text
text-base
1rem
Base text size
text-lg
1.125rem
Large text
text-xl
1.25rem
Extra large text
text-2xl
1.5rem
Heading level 2
text-3xl
1.875rem
Heading level 1
text-4xl
2.25rem
Display text
Font Weights
font-light
300
Light weight
font-normal
400
Normal weight
font-medium
500
Medium weight
font-semibold
600
Semibold weight
font-bold
700
Bold weight
Line Heights
leading-none
1
This is an example of text with no line height. See how it affects multiple lines of content in a paragraph.
leading-tight
1.25
This is an example of text with tight line height. See how it affects multiple lines of content in a paragraph.
leading-snug
1.375
This is an example of text with snug line height. See how it affects multiple lines of content in a paragraph.
leading-normal
1.5
This is an example of text with normal line height. See how it affects multiple lines of content in a paragraph.
leading-relaxed
1.625
This is an example of text with relaxed line height. See how it affects multiple lines of content in a paragraph.
leading-loose
2
This is an example of text with loose line height. See how it affects multiple lines of content in a paragraph.
Font Features
Tracking (Letter Spacing)
Tight tracking
Normal tracking
Wide tracking
Text Transforms
Uppercase text
Lowercase text
Capitalized text