Typography

Consistent type scales create hierarchy and improve readability across all interfaces.

Typography Scale

Name	Class	Size	Line Height	Weight	Usage
Heading 1	`text-2xl font-semibold`	1.5rem (24px)	1.25	600	Main page headings, Article titles, Dashboard sections
Heading 2	`text-lg font-medium`	1.125rem (18px)	1.4	500	Subsection headers, Component titles, Form sections
Heading 3	`text-base font-semibold`	1rem (16px)	1.5	600	Card headers, List titles, Settings groups
Heading 4	`text-sm font-medium`	0.875rem (14px)	1.43	500	Small headers, Table headers, Form labels
Body Large	`text-base`	1rem (16px)	1.5	400	Body text, Paragraphs, Default content
Body Medium	`text-sm`	0.875rem (14px)	1.43	400	Secondary text, Captions, Helper text
Body Small	`text-xs`	0.75rem (12px)	1.5	400	Fine 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

Name	Class	Weight	Usage
Thin	`font-thin`	100	Decorative text
Light	`font-light`	300	Subtle text
Normal	`font-normal`	400	Body text
Medium	`font-medium`	500	Emphasis
Semibold	`font-semibold`	600	Headings
Bold	`font-bold`	700	Strong emphasis
Black	`font-black`	900	Maximum 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));
}

Foundations

Components

Guidelines

Typography Scale

Font Families

Inter (Primary)

Fira Code (Code)

System Serif

Font Weights

Guidelines

Hierarchy Best Practices

Accessibility Guidelines

Implementation

HTML/Angular

CSS Custom Properties

​Typography Scale

​Font Families

Inter (Primary)

Fira Code (Code)

System Serif

​Font Weights

​Guidelines

Hierarchy Best Practices

Accessibility Guidelines

​Implementation

​HTML/Angular

​CSS Custom Properties

Typography Scale

Font Families

Font Weights

Guidelines

Implementation

HTML/Angular

CSS Custom Properties