Typography

Modular scale (1.2 ratio) with 8px grid-snapped line-heights. Responsive breakpoints at 730px and 1080px adjust heading sizes.

Type Scale

Token	Size	Line-height
`--ui-font-size-xs`	12px	16px
`--ui-font-size-sm`	14px	24px
`--ui-font-size-md`	16px	24px
`--ui-font-size-lg`	20px	32px
`--ui-font-size-xl`	24px	32px
`--ui-font-size-2xl`	28px	32px
`--ui-font-size-3xl`	32px	40px
`--ui-font-size-4xl`	40px	48px

<!-- Font sizes follow a 1.2 (Minor Third) modular scale from 12px to 40px. All line-heights snap to 8px multiples. -->
<table class="ui-table">
  <thead>
    <tr>
      <th>Token</th>
      <th>Size</th>
      <th>Line-height</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <code>--ui-font-size-xs</code>
      </td>
      <td>12px</td>
      <td>16px</td>
    </tr>
    <tr>
      <td>
        <code>--ui-font-size-sm</code>
      </td>
      <td>14px</td>
      <td>24px</td>
    </tr>
    <tr>
      <td>
        <code>--ui-font-size-md</code>
      </td>
      <td>16px</td>
      <td>24px</td>
    </tr>
    <tr>
      <td>
        <code>--ui-font-size-lg</code>
      </td>
      <td>20px</td>
      <td>32px</td>
    </tr>
    <tr>
      <td>
        <code>--ui-font-size-xl</code>
      </td>
      <td>24px</td>
      <td>32px</td>
    </tr>
    <tr>
      <td>
        <code>--ui-font-size-2xl</code>
      </td>
      <td>28px</td>
      <td>32px</td>
    </tr>
    <tr>
      <td>
        <code>--ui-font-size-3xl</code>
      </td>
      <td>32px</td>
      <td>40px</td>
    </tr>
    <tr>
      <td>
        <code>--ui-font-size-4xl</code>
      </td>
      <td>40px</td>
      <td>48px</td>
    </tr>
  </tbody>
</table>

Headings

Heading 1 - 40px / 48px

Heading 2 - 32px / 40px

Heading 3 - 28px / 32px

Heading 4 - 24px / 32px

Heading 5 - 20px / 24px

<!-- Headings use semantic tokens and adjust size at breakpoints. -->
<h1>Heading 1 - 40px / 48px</h1>
<h2>Heading 2 - 32px / 40px</h2>
<h3>Heading 3 - 28px / 32px</h3>
<h4>Heading 4 - 24px / 32px</h4>
<h5>Heading 5 - 20px / 24px</h5>

Body Text

Body text at 16px with 24px line-height. The bold text and inline code maintain the same rhythm.

Body small at 14px with 24px line-height for secondary text.

<!-- Default body text at 16px with 24px line-height (1.5x ratio). -->
<p>
Body text at 16px with 24px line-height. The 
  <strong>bold text</strong>
 and 
  <code>inline code</code>
 maintain the same rhythm.
</p>
<p class="ui-text-body-sm">Body small at 14px with 24px line-height for secondary text.</p>

Text Roles

Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros.

Eyebrow text

Related Heading

Caption text - 12px / 16px. Use for labels, hints, and metadata.

<!-- Semantic text styles for specific use cases. -->
<p class="ui-text-lead">Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros.</p>
<p class="ui-text-eyebrow">Eyebrow text</p>
<h2>Related Heading</h2>
<p class="ui-text-caption">Caption text - 12px / 16px. Use for labels, hints, and metadata.</p>

Font Weights

Normal (400) - Body text

Medium (500) - Labels, small headings

Semibold (600) - Subheadings

Bold (700) - Headlines, emphasis

<!-- Four weight levels for hierarchy. -->
<p class="ui-font-normal">Normal (400) - Body text</p>
<p class="ui-font-medium">Medium (500) - Labels, small headings</p>
<p class="ui-font-semibold">Semibold (600) - Subheadings</p>
<p class="ui-font-bold">Bold (700) - Headlines, emphasis</p>

Letter Spacing

Display tracking (-0.02em)

Body tracking (0) - default

Caps tracking (+0.08em)

<!-- Three tracking options based on use case. -->
<p class="ui-text-3xl ui-tracking-display">Display tracking (-0.02em)</p>
<p>Body tracking (0) - default</p>
<p class="ui-text-eyebrow">Caps tracking (+0.08em)</p>

Line Length

This paragraph is constrained to 65ch max-width for optimal reading comfort. Long lines of text are harder to read because the eye has difficulty tracking back to the start of the next line.

<!-- Constrain text width for optimal readability (45-75 characters). -->
<div class="ui-prose">
  <p>This paragraph is constrained to 65ch max-width for optimal reading comfort. Long lines of text are harder to read because the eye has difficulty tracking back to the start of the next line.</p>
</div>

Responsive Behavior

Heading	Mobile	Default	Desktop
h1	28px	40px	48px
h2	24px	32px	40px
h3	20px	28px	28px
h4	18px	24px	24px

<!-- Headings scale down on mobile (<730px) and up on desktop (>1080px). -->
<table class="ui-table">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Mobile</th>
      <th>Default</th>
      <th>Desktop</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>h1</td>
      <td>28px</td>
      <td>40px</td>
      <td>48px</td>
    </tr>
    <tr>
      <td>h2</td>
      <td>24px</td>
      <td>32px</td>
      <td>40px</td>
    </tr>
    <tr>
      <td>h3</td>
      <td>20px</td>
      <td>28px</td>
      <td>28px</td>
    </tr>
    <tr>
      <td>h4</td>
      <td>18px</td>
      <td>24px</td>
      <td>24px</td>
    </tr>
  </tbody>
</table>