Typography

Our typography system is designed for readability and hierarchy across all screen sizes.

We use Inter as our primary font family for all text. For code blocks, we use a monospace font.

Headings

Used for section titles and content hierarchy

Heading 1

text-5xl font-bold

text-4xl font-bold

text-3xl font-bold

text-2xl font-bold

text-xl font-bold

text-lg font-bold

Body Text

Used for paragraphs and general content

Base text (text-base): The quick brown fox jumps over the lazy dog. This is used for most body content throughout the application.

Small text (text-sm): The quick brown fox jumps over the lazy dog. This is used for secondary content, captions, and helper text.

Extra small text (text-xs): The quick brown fox jumps over the lazy dog. This is used for fine print, footnotes, and legal text.

Large text (text-lg): The quick brown fox jumps over the lazy dog. This is used for emphasized content and introductory paragraphs.

Font Weights

Different weights for emphasis and hierarchy

Light (font-light): The quick brown fox jumps over the lazy dog.

Normal (font-normal): The quick brown fox jumps over the lazy dog.

Medium (font-medium): The quick brown fox jumps over the lazy dog.

Semibold (font-semibold): The quick brown fox jumps over the lazy dog.

Bold (font-bold): The quick brown fox jumps over the lazy dog.

Extrabold (font-extrabold): The quick brown fox jumps over the lazy dog.