Typography
Type scale and weights.
Font Family
Base Font: var(--font-family-base) = "Inter", sans-serif
Font Sizes
The quick brown fox jumps over the lazy dog
--font-size-5xl: 3rem (48px)
The quick brown fox jumps over the lazy dog
--font-size-4xl: 2.25rem (36px)
The quick brown fox jumps over the lazy dog
--font-size-3xl: 1.875rem (30px)
The quick brown fox jumps over the lazy dog
--font-size-2xl: 1.5rem (24px)
The quick brown fox jumps over the lazy dog
--font-size-xl: 1.25rem (20px)
The quick brown fox jumps over the lazy dog. This is an example of body large text used for introductions and important paragraphs.
--font-size-l: 1.125rem (18px)
The quick brown fox jumps over the lazy dog. This is the standard body text used throughout the application for regular content.
--font-size-m: 1rem (16px)
The quick brown fox jumps over the lazy dog. This is small text used for captions and secondary information.
--font-size-s: 0.875rem (14px)
The quick brown fox jumps over the lazy dog. This is extra small text used for metadata and minor information.
--font-size-xs: 0.75rem (12px)
Font Weights
Regular (400) - Primary body text weight
Semibold (600) - Subheading weight
Bold (700) - Heading weight
Line Heights
Tight – headings
Multiple lines of text
Should be
clearly visible
--line-height-tight: 1.25
Normal – short blocks
Multiple lines of text
Should be
clearly visible
--line-height-normal: 1.5
Relaxed – body
Multiple lines of text
Should be
clearly visible
--line-height-relaxed: 1.75