Typography

The TpGroup typography system uses system fonts for zero-latency loading and offline capability. Our type scale provides 10 consistent sizes optimized for readability across all devices.

Font Families

System UI

Primary font stack (0 KB, offline-ready)

Sans-serif

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

System Mono

Code snippets, technical content

Monospace

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace

Type Scale

display-xl

48px / 600

Hero headlines, landing pages

The quick brown fox jumps over the lazy dog
Size: 48px
Line Height: 1.2
Weight: 600

display-lg

40px / 600

Large display text

The quick brown fox jumps over the lazy dog
Size: 40px
Line Height: 1.2
Weight: 600

heading-xl

32px / 600

Page titles

The quick brown fox jumps over the lazy dog
Size: 32px
Line Height: 1.3
Weight: 600

heading-lg

28px / 600

Section headings

The quick brown fox jumps over the lazy dog
Size: 28px
Line Height: 1.3
Weight: 600

heading-md

24px / 600

Card titles, modal headers

The quick brown fox jumps over the lazy dog
Size: 24px
Line Height: 1.3
Weight: 600

heading-sm

20px / 600

Small headings

The quick brown fox jumps over the lazy dog
Size: 20px
Line Height: 1.4
Weight: 600

body-lg

18px / 400

Large body text

The quick brown fox jumps over the lazy dog
Size: 18px
Line Height: 1.6
Weight: 400

body-md

16px / 400

Default body text

The quick brown fox jumps over the lazy dog
Size: 16px
Line Height: 1.5
Weight: 400

body-sm

14px / 400

Small body text

The quick brown fox jumps over the lazy dog
Size: 14px
Line Height: 1.5
Weight: 400

body-xs

12px / 400

Captions, labels, helper text

The quick brown fox jumps over the lazy dog
Size: 12px
Line Height: 1.5
Weight: 400

Font Weights

Aa

Regular

Body text, paragraphs

400
Aa

Medium

Emphasis, buttons

500
Aa

Semibold

Headings, strong emphasis

600
Aa

Bold

High emphasis

700

Code Example

/* CSS Custom Properties */
--font-size-display-xl: 48px;
--font-size-heading-lg: 28px;
--font-size-body-md: 16px;

/* Tailwind Classes */
<h1 className="text-5xl font-semibold">
<h2 className="text-2xl font-semibold">
<p className="text-base">

/* React/TypeScript */
<Text variant="heading-lg">Section Heading</Text>
<Text variant="body-md">Paragraph text</Text>

Typography Guidelines

  • • System fonts load instantly (0 KB) and work offline - perfect for low-bandwidth markets
  • • Maintain 1.5-1.6 line height for body text to ensure readability
  • • Use semantic heading hierarchy (h1 → h2 → h3) for accessibility
  • • Keep line lengths between 45-75 characters for optimal reading
  • • All text meets WCAG 2.2 AA contrast requirements on backgrounds