Fonts & Typography

Complete typography system with carefully selected font families and comprehensive weight scales

Inter Font StackSystem Font FallbacksWCAG Compliant

Font Families

Sans Serif

Modern, clean fonts optimized for digital interfaces. Perfect for UI text, buttons, and general content.

Sample Text

The quick brown fox jumps over the lazy dog

Typography is the art and technique of arranging type to make written language legible, readable and appealing. Good typography creates a visual hierarchy that guides the reader through the content.

Rendered in: Inter (Primary)

Available Fonts

Inter (Primary)

Modern geometric sans-serif

Usage: Headings, body text, UI elements

System Fonts

Native system fonts as fallbacks

Usage: Ensures consistent rendering across platforms

Font Weights

Thin (100)

Ultra light, for subtle accents

font-thin

Light (300)

Light weight for secondary text

font-light

Normal (400)

Standard weight for body text

font-normal

Medium (500)

Medium weight for emphasis

font-medium

Semibold (600)

Bold for subheadings

font-semibold

Bold (700)

Strong emphasis and headings

font-bold

Extrabold (800)

Very strong emphasis

font-extrabold

Black (900)

Maximum emphasis and impact

font-black

Text Sizes & Line Heights

Extra Small (text-xs)

Extra small text for metadata, captions, and fine print. Perfect for disclaimers and secondary information.

text-xs leading-normal

Small (text-sm)

Small text for labels, helper text, and secondary content. Good for form labels and annotations.

text-sm leading-relaxed

Base (text-base)

Base text size for body content and general reading. The standard size for most web content and provides excellent readability.

text-base leading-relaxed

Large (text-lg)

Large text for emphasized content and introductory paragraphs. Great for featured content and improved accessibility.

text-lg leading-relaxed

Extra Large (text-xl)

Extra large text for important content and section introductions. Perfect for highlighting key information.

text-xl leading-relaxed

2XL (text-2xl)

2XL text for major section headings and important content hierarchy.

text-2xl leading-tight

Typography Guidelines

✅ Do's

  • Use Inter (sans) for all UI text and digital content
  • Maintain consistent line heights (1.5-1.75) for body text
  • Use font-serif only for long-form content and articles
  • Reserve font-mono for code and technical content

❌ Don'ts

  • Don't mix font families within the same content block
  • Avoid text sizes smaller than 14px for body content
  • Don't use all caps for long text passages
  • Avoid ultra-thin fonts (under 300 weight) for small text