Nativ ui
Documentation

Text Size

Typography size scale based on the Golden Ratio for visual harmony.

The Magic Ratio

The ratio used for creating visual harmony is the Golden Ratio, which is 1.618. This mathematical calculation is what makes interfaces, like Apple's, feel "right" to users' eyes.

Typography Scale

Our typography system uses CSS variables based on the Golden Ratio, with additional intermediate sizes for flexibility.

ClassSizePixelsUse Case
text-2xs0.625rem10pxMicro labels, badges
text-xs0.75rem12pxCaptions, timestamps
text-sm0.875rem14pxSecondary text, meta
text-base1rem16pxBody text (base)
text-md1.125rem18pxLead paragraphs
text-lg1.25rem20pxLarge body text
text-xl1.625rem26pxH4, subheadings
text-2xl2rem32pxH3, small titles
text-3xl2.625rem42pxH2, section titles
text-4xl3.5rem56pxH1, page titles
text-5xl4.25rem68pxDisplay, hero
text-6xl5.5rem88pxLarge display
text-7xl6.875rem110pxExtra large display

Bold values represent the core Golden Ratio scale (16 → 26 → 42 → 68 → 110).

Golden Ratio Calculation

16 × 1.618 = 26
26 × 1.618 = 42
42 × 1.618 = 68
68 × 1.618 = 110

CSS Variables

All sizes are defined as CSS variables in globals.css:

:root {
  /* Smaller sizes */
  --text-2xs: 0.625rem;    /* 10px */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
 
  /* Base */
  --text-base: 1rem;       /* 16px */
 
  /* Larger sizes */
  --text-md: 1.125rem;     /* 18px */
  --text-lg: 1.25rem;      /* 20px */
  --text-xl: 1.625rem;     /* 26px */
  --text-2xl: 2rem;        /* 32px */
  --text-3xl: 2.625rem;    /* 42px */
  --text-4xl: 3.5rem;      /* 56px */
  --text-5xl: 4.25rem;     /* 68px */
  --text-6xl: 5.5rem;      /* 88px */
  --text-7xl: 6.875rem;    /* 110px */
}

Line Heights

Each text size has an optimized line-height:

Size RangeLine HeightVariable
Display (5xl-7xl)1--leading-none
Headings (3xl-4xl)1.25--leading-tight
Subheadings (xl-2xl)1.375--leading-snug
Body (base-lg)1.625--leading-relaxed
Small (2xs-sm)1.5--leading-normal

Usage Examples

Headings

<h1 class="text-5xl">Hero Heading</h1>
<h2 class="text-3xl">Section Title</h2>
<h3 class="text-2xl">Subsection</h3>
<h4 class="text-xl">Minor Heading</h4>

Body Text

<p class="text-base">Regular body text for content.</p>
<p class="text-lg">Lead paragraph for introductions.</p>
<p class="text-sm text-muted-foreground">Secondary information.</p>

Small Text

<span class="text-xs">Caption or timestamp</span>
<span class="text-2xs">Micro label or badge</span>

Best Practices

  1. Stick to the scale - Avoid arbitrary sizes between tiers
  2. Hierarchy matters - Larger = more important
  3. Consistency - Use the same size for the same purpose across pages
  4. Line height - Larger text needs tighter leading, smaller text needs looser
  5. Responsive - Consider reducing sizes on mobile by one step