Typography
Typography in Tessera UI establishes visual hierarchy and readability. The type system uses two font families and a constrained scale aligned with Material Design 3 roles.
Font Families
Section titled “Font Families”Plus Jakarta Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
—ts-font-family-base: ‘Plus Jakarta Sans’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, sans-serif
JetBrains Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 => {} [] () <>
—ts-font-family-mono: ‘JetBrains Mono’, ‘Fira Code’, ‘Consolas’, monospace
Font Weights
Section titled “Font Weights”Type Scale
Section titled “Type Scale”Each size step provides a meaningful visual distinction. The scale uses rem units based on a 16px root.
| Token | Size | Pixels | Preview |
|---|---|---|---|
—ts-font-size-2xs | 0.6875rem | 11px | The quick brown fox |
—ts-font-size-xs | 0.75rem | 12px | The quick brown fox |
—ts-font-size-sm | 0.875rem | 14px | The quick brown fox |
—ts-font-size-md | 1rem | 16px | The quick brown fox |
—ts-font-size-lg | 1.375rem | 22px | The quick brown fox |
—ts-font-size-xl | 1.5rem | 24px | The quick brown fox |
—ts-font-size-2xl | 1.75rem | 28px | The quick brown fox |
—ts-font-size-3xl | 2rem | 32px | The quick brown fox |
—ts-font-size-4xl | 2.8125rem | 45px | Quick fox |
—ts-font-size-5xl | 3.5625rem | 57px | Quick |
Type Roles
Section titled “Type Roles”Composite type roles combine size, weight, line-height, and letter-spacing into semantic groupings aligned with Material Design 3.
Display
Section titled “Display”Large hero and marketing text. Uses responsive clamp() for fluid sizing.
Display Large
Display Medium
Display Small
Heading
Section titled “Heading”Page and section headers with responsive sizing.
Heading Large
Heading Medium
Heading Small
Card headers, dialog titles, and navigation items.
Title Large — card headers and dialog titles
Title Medium — sub-headings and section titles
Title Small — navigation items and table headers
Prose, descriptions, and general content.
Body Large — primary reading text for articles, descriptions, and long-form content. Designed for comfortable extended reading with generous line height.
Body Medium — the default text size for most UI content. Used in form descriptions, helper text, and secondary information.
Body Small — compact content for dense interfaces. Used for table cells, metadata, and supplementary text that doesn’t need prominent display.
Buttons, form labels, and badges.
Label Large — Primary button text, form labels
Label Medium — Small button text, badge labels
Label Small — Micro labels, overlines
Caption
Section titled “Caption”Timestamps, footnotes, and fine print.
Caption — timestamps, footnotes, and supplementary fine print that sits below primary content
Line Heights
Section titled “Line Heights”| Token | Value | Usage |
|---|---|---|
--ts-line-height-tight | 1.25 | Headings, labels |
--ts-line-height-normal | 1.43 | Body text (M3: 20/14, 24/16) |
--ts-line-height-loose | 1.5 | Display text, long-form content |
Letter Spacing
Section titled “Letter Spacing”| Token | Value | Usage |
|---|---|---|
--ts-letter-spacing-tighter | -0.02em | Large display text |
--ts-letter-spacing-tight | -0.01em | Headings |
--ts-letter-spacing-normal | 0 | Most text roles |
--ts-letter-spacing-wide | 0.006em | Body small, label medium |
--ts-letter-spacing-wider | 0.009em | Label small (11px) |
--ts-letter-spacing-widest | 0.05em | All-caps text, overlines |