Typography
Typography utility classes from the Eclipse Design System
The Eclipse Design System provides utility classes for consistent typography across four categories: Titles, Headings, Text, and Code. Each maps to specific font families, sizes, weights, and line heights defined as design tokens.
Font Families
--font-sans-display
Sora
Used for headings
--font-sans
Inter
Used for body text
--font-mono
Mona Sans Mono VF
Used for code
Titles
Title styles use the Sora display font at Medium and Semibold weights with natural letter spacing. Use these for hero sections, page titles, and marketing content.
.type-title-5xl · 64px/72px · weight 500
The quick brown fox
.type-title-4xl · 40px/48px · weight 500
The quick brown fox jumps over the lazy dog
.type-title-3xl · 30px/36px · weight 500
The quick brown fox jumps over the lazy dog
.type-title-2xl · 24px/32px · weight 600
The quick brown fox jumps over the lazy dog
.type-title-xl · 20px/28px · weight 600
The quick brown fox jumps over the lazy dog
.type-title-lg · 18px/28px · weight 600
The quick brown fox jumps over the lazy dog
.type-title-md · 16px/24px · weight 600
The quick brown fox jumps over the lazy dog
.type-title-sm · 14px/20px · weight 600 · uppercase
The quick brown fox jumps over the lazy dog
Title reference
| Class | Font | Size | Line height | Weight | Notes |
|---|---|---|---|---|---|
type-title-5xl | Sora | 64px (4rem) | 72px (4.5rem) | 500 | |
type-title-4xl | Sora | 40px (2.5rem) | 48px (3rem) | 500 | |
type-title-3xl | Sora | 30px (1.875rem) | 36px (2.25rem) | 500 | |
type-title-2xl | Sora | 24px (1.5rem) | 32px (2rem) | 600 | |
type-title-xl | Sora | 20px (1.25rem) | 28px (1.75rem) | 600 | |
type-title-lg | Sora | 18px (1.125rem) | 28px (1.75rem) | 600 | |
type-title-md | Sora | 16px (1rem) | 24px (1.5rem) | 600 | |
type-title-sm | Sora | 14px (0.875rem) | 20px (1.25rem) | 600 | Uppercase, letter-spaced |
Headings
Heading styles use the Sora display font, except for heading-2xs. Use these styles only for headings.
.type-heading-2xl · 24px/32px · weight 500
The quick brown fox jumps over the lazy dog
.type-heading-xl · 20px/28px · weight 500
The quick brown fox jumps over the lazy dog
.type-heading-lg · 18px/28px · weight 500
The quick brown fox jumps over the lazy dog
.type-heading-md · 18px/28px · weight 600
The quick brown fox jumps over the lazy dog
.type-heading-sm · 14px/20px · weight 600
The quick brown fox jumps over the lazy dog
.type-heading-xs · 12px/16px · weight 600
The quick brown fox jumps over the lazy dog
.type-heading-2xs · 11px/16px · weight 600 · uppercase · Inter
The quick brown fox jumps over the lazy dog
Heading reference
| Class | Font | Size | Line height | Weight |
|---|---|---|---|---|
type-heading-2xl | Sora | 24px (1.5rem) | 32px (2rem) | 500 |
type-heading-xl | Sora | 20px (1.25rem) | 28px (1.75rem) | 500 |
type-heading-lg | Sora | 18px (1.125rem) | 28px (1.75rem) | 500 |
type-heading-md | Sora | 18px (1.125rem) | 28px (1.75rem) | 600 |
type-heading-sm | Sora | 14px (0.875rem) | 20px (1.25rem) | 600 |
type-heading-xs | Sora | 12px (0.75rem) | 16px (1rem) | 600 |
type-heading-2xs | Inter | 11px (0.6875rem) | 16px (1rem) | 600 |
Text
Text styles use the Inter body font. Most content, labels and captions should be rendered using these styles. Body copy resolves to weight 380 by default — Inter renders optically darker than the system UI face at 400, and the variable axis at 380 matches the intended body colour.
.type-text-md · 16px/24px · weight 400
The quick brown fox jumps over the lazy dog
.type-text-md-strong · 16px/24px · weight 500
The quick brown fox jumps over the lazy dog
.type-text-md-stronger · 16px/24px · weight 600
The quick brown fox jumps over the lazy dog
.type-text-sm · 14px/20px · weight 400
The quick brown fox jumps over the lazy dog
.type-text-sm-strong · 14px/20px · weight 500
The quick brown fox jumps over the lazy dog
.type-text-sm-stronger · 14px/20px · weight 600
The quick brown fox jumps over the lazy dog
.type-text-xs · 12px/16px · weight 400
The quick brown fox jumps over the lazy dog
.type-text-xs-strong · 12px/16px · weight 500
The quick brown fox jumps over the lazy dog
.type-text-xs-stronger · 12px/16px · weight 600
The quick brown fox jumps over the lazy dog
Text reference
| Class | Size | Line height | Weight |
|---|---|---|---|
type-text-md | 16px (1rem) | 24px (1.5rem) | 400 |
type-text-md-strong | 16px (1rem) | 24px (1.5rem) | 500 |
type-text-md-stronger | 16px (1rem) | 24px (1.5rem) | 600 |
type-text-sm | 14px (0.875rem) | 20px (1.25rem) | 400 |
type-text-sm-strong | 14px (0.875rem) | 20px (1.25rem) | 500 |
type-text-sm-stronger | 14px (0.875rem) | 20px (1.25rem) | 600 |
type-text-xs | 12px (0.75rem) | 16px (1rem) | 400 |
type-text-xs-strong | 12px (0.75rem) | 16px (1rem) | 500 |
type-text-xs-stronger | 12px (0.75rem) | 16px (1rem) | 600 |
Code
Code styles use the Mona Sans Mono VF monospace font. Use it for displaying code or tabular data.
.type-code-md · 16px/24px · weight 400
const hello = "world";
.type-code-md-strong · 16px/24px · weight 500
const hello = "world";
.type-code-sm · 14px/20px · weight 400
const hello = "world";
.type-code-sm-strong · 14px/20px · weight 500
const hello = "world";
.type-code-xs · 12px/16px · weight 400
const hello = "world";
.type-code-xs-strong · 12px/16px · weight 500
const hello = "world";
Code reference
| Class | Size | Line height | Weight |
|---|---|---|---|
type-code-md | 16px (1rem) | 24px (1.5rem) | 400 |
type-code-md-strong | 16px (1rem) | 24px (1.5rem) | 500 |
type-code-sm | 14px (0.875rem) | 20px (1.25rem) | 400 |
type-code-sm-strong | 14px (0.875rem) | 20px (1.25rem) | 500 |
type-code-xs | 12px (0.75rem) | 16px (1rem) | 400 |
type-code-xs-strong | 12px (0.75rem) | 16px (1rem) | 500 |
Usage
<h1 className="type-title-4xl">Hero Title</h1>
<h2 className="type-heading-2xl">Page Heading</h2>
<h3 className="type-heading-lg">Section Heading</h3>
<p className="type-text-md">Body text paragraph.</p>
<p className="type-text-sm-strong">Emphasized small text.</p>
<code className="type-code-sm">inlineCode()</code>