Typography

Type scale based on Inter font. Consistent sizing and weights for hierarchy.

Font Family

Inter is used as the primary typeface across all UI.

html
Primary
Inter
Fallback
system-ui
font-family: 'Inter', system-ui, sans-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*() 
<!-- Font family -->
<div class="uc-font-sans">Inter (primary)</div>

<!-- Font weights -->
<span class="uc-font-normal">Regular 400</span>
<span class="uc-font-medium">Medium 500</span>
<span class="uc-font-semibold">Semi 600</span>
<span class="uc-font-bold">Bold 700</span>

Font Weights

Available weights for Inter in the system.

html
400 Regular The quick brown fox jumps over the lazy dog
500 Medium The quick brown fox jumps over the lazy dog
600 Semi The quick brown fox jumps over the lazy dog
700 Bold The quick brown fox jumps over the lazy dog
800 Extra The quick brown fox jumps over the lazy dog
900 Black The quick brown fox jumps over the lazy dog 
<span class="uc-font-normal">Regular 400</span>
<span class="uc-font-medium">Medium 500</span>
<span class="uc-font-semibold">Semi 600</span>
<span class="uc-font-bold">Bold 700</span>
<span class="uc-font-extrabold">Extra 800</span>
<span class="uc-font-black">Black 900</span>

Type Scale

Complete typographic scale from Display to Caption.

Display 48px / 800 / -0.02em
Design System
Heading 1 36px / 800 / -0.02em
Design System
Heading 2 30px / 700 / -0.015em
Design System
Heading 3 24px / 700 / -0.01em
Design System
Heading 4 20px / 600 / -0.01em
Design System
Heading 5 18px / 600 / 0
Design System
Heading 6 16px / 600 / 0
Design System
Body Large 18px / 400 / 0
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Body 16px / 400 / 0
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Body Small 14px / 400 / 0
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Label 14px / 500 / 0
Form field label
Caption 12px / 400 / 0
Secondary text, timestamps, helper text
Overline 11px / 600 / 0.06em
SECTION LABEL

Usage Example

How types work together in a card layout.

html
NEW FEATURE
Typography System
A consistent type scale built on Inter ensures visual hierarchy and readability across all screens.
Key features:
  • 13 type styles from Display to Overline
  • 6 font weights (400-900)
  • Optimized line heights per size
Last updated 2 hours ago
<div class="uc-rounded-2xl uc-border uc-border-border-default uc-p-6">
  <div class="overline">NEW FEATURE</div>
  <h3 class="h4">Typography System</h3>
  <p class="body-sm uc-text-fg-disabled">A consistent type scale...</p>
  <p class="label">Key features:</p>
  <ul class="body-sm uc-text-fg-disabled">
    <li>13 type styles</li>
  </ul>
  <div class="caption uc-text-fg-disabled">Last updated 2h ago</div>
</div>

Token Reference

All typography tokens with their values.

Token Size Weight Line Height Tracking
display48px8001.1-0.02em
h136px8001.15-0.02em
h230px7001.2-0.015em
h324px7001.25-0.01em
h420px6001.3-0.01em
h518px6001.350
h616px6001.40
body-lg18px4001.60
body16px4001.60
body-sm14px4001.50
label14px5001.40
caption12px4001.40
overline11px6001.40.06em