Skip to main content
Consistent type scales create hierarchy and improve readability across all interfaces.

​
Typography Scale

NameClassSizeLine HeightWeightUsage
Heading 1text-2xl font-semibold1.5rem (24px)1.25600Main page headings, Article titles, Dashboard sections
Heading 2text-lg font-medium1.125rem (18px)1.4500Subsection headers, Component titles, Form sections
Heading 3text-base font-semibold1rem (16px)1.5600Card headers, List titles, Settings groups
Heading 4text-sm font-medium0.875rem (14px)1.43500Small headers, Table headers, Form labels
Body Largetext-base1rem (16px)1.5400Body text, Paragraphs, Default content
Body Mediumtext-sm0.875rem (14px)1.43400Secondary text, Captions, Helper text
Body Smalltext-xs0.75rem (12px)1.5400Fine print, Labels, Metadata, Timestamps

​
Font Families

Inter (Primary)

Usage: All UI text, Body content, Headings, Navigation, Interface elements
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Fira Code (Code)

Usage: Code blocks, Syntax highlighting, Terminal output, Technical documentation
'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, monospace

System Serif

Usage: Long-form reading, Articles, Documentation (when needed)
ui-serif, Georgia, Cambria, "Times New Roman", serif

​
Font Weights

NameClassWeightUsage
Thinfont-thin100Decorative text
Lightfont-light300Subtle text
Normalfont-normal400Body text
Mediumfont-medium500Emphasis
Semiboldfont-semibold600Headings
Boldfont-bold700Strong emphasis
Blackfont-black900Maximum emphasis

​
Guidelines

Hierarchy Best Practices

  • Use display sizes for hero sections and landing pages - Follow heading order (H1 → H2 → H3) for proper structure - Maintain consistent spacing between text elements - Use font weights to create emphasis and hierarchy - Keep line lengths between 45-75 characters for readability

Accessibility Guidelines

  • Ensure minimum 4.5:1 contrast ratio for body text - Use 3:1 contrast ratio for large text (18px+ or 14px+ bold) - Avoid using color alone to convey information - Test with screen readers and keyboard navigation - Provide sufficient spacing for touch targets

​
Implementation

​
HTML/Angular

<h1 class="text-2xl font-semibold">Page Title</h1>

<p class="text-sm text-muted-foreground">Body content with proper hierarchy</p>

​
CSS Custom Properties

.heading {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: hsl(var(--foreground));
}