Typography

Our typography scale with consistent sizing, weights, and usage guidelines.

Preview Text

Edit the text below to preview all typography styles

Inter (Sans)

Default sans-serif font family

Aa

Regular 400

Aa

Medium 500

Aa

Semibold 600

Aa

Bold 700

Poppins

Secondary font family

Aa

Regular 400

Aa

Medium 500

Aa

Semibold 600

Aa

Bold 700

Heading XL

48px • Bold • Hero titles

The quick brown fox jumps over the lazy dog

text-5xl font-bold

Heading L

36px • Bold • Section headers

The quick brown fox jumps over the lazy dog

text-4xl font-bold

Heading M

28px • Semi-Bold • Feature titles

The quick brown fox jumps over the lazy dog

text-[28px] font-semibold

Heading S

22px • Semi-Bold • Card titles

The quick brown fox jumps over the lazy dog

text-[22px] font-semibold

Body L

18px • Regular • Key descriptions

The quick brown fox jumps over the lazy dog

text-lg font-normal

Body M

16px • Regular • Default text

The quick brown fox jumps over the lazy dog

text-base font-normal

Body S

14px • Regular • Helper text

The quick brown fox jumps over the lazy dog

text-sm font-normal

Caption

12px • Regular • Labels, metadata

The quick brown fox jumps over the lazy dog

text-xs font-normal

Typography Guidelines

Hierarchy: Use heading sizes to establish clear visual hierarchy. Start with Heading XL for hero sections, then use progressively smaller headings for subsections.

Body Text: Use Body M (16px) as the default for most content. Use Body L (18px) for important descriptions and Body S (14px) for helper text.

Consistency: Stick to the defined scale to maintain consistency across the application. Avoid using arbitrary font sizes.

Line Height: All typography styles include appropriate line heights for readability.