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
Mona Sans VF
Used for headings
--font-sans
Inter
Used for body text
--font-mono
Mona Sans Mono VF
Used for code
Titles
Title styles use the Mona Sans VF display font with heavy weights and extended widths for maximum visual impact. Use these for hero sections, page titles, and marketing content.
.type-title-5xl · 64px/72px · weight 900 · width 125
The quick brown fox
.type-title-4xl · 40px/48px · weight 900 · width 125
The quick brown fox jumps over the lazy dog
.type-title-3xl · 30px/36px · weight 900 · width 125
The quick brown fox jumps over the lazy dog
.type-title-xl · 20px/28px · weight 800 · width 110
The quick brown fox jumps over the lazy dog
.type-title-lg · 18px/28px · weight 800 · width 110
The quick brown fox jumps over the lazy dog
.type-title-md · 16px/24px · weight 800 · width 110
The quick brown fox jumps over the lazy dog
.type-title-sm · 14px/20px · weight 800 · width 125 · uppercase
The quick brown fox jumps over the lazy dog
Title reference
| Class | Font | Size | Line height | Weight | Width | Notes |
|---|---|---|---|---|---|---|
type-title-5xl | Mona Sans VF | 64px (4rem) | 72px (4.5rem) | 900 | 125 | |
type-title-4xl | Mona Sans VF | 40px (2.5rem) | 48px (3rem) | 900 | 125 | |
type-title-3xl | Mona Sans VF | 30px (1.875rem) | 36px (2.25rem) | 900 | 125 | |
type-title-xl | Mona Sans VF | 20px (1.25rem) | 28px (1.75rem) | 800 | 110 | |
type-title-lg | Mona Sans VF | 18px (1.125rem) | 28px (1.75rem) | 800 | 110 | |
type-title-md | Mona Sans VF | 16px (1rem) | 24px (1.5rem) | 800 | 110 | |
type-title-sm | Mona Sans VF | 14px (0.875rem) | 20px (1.25rem) | 800 | 125 | Uppercase, letter-spaced |
Headings
Heading styles use the Mona Sans VF display font, except for heading-2xs. Use these styles only for headings.
.type-heading-2xl · 24px/32px · weight 700
The quick brown fox jumps over the lazy dog
.type-heading-xl · 20px/28px · weight 700
The quick brown fox jumps over the lazy dog
.type-heading-lg · 18px/28px · weight 700
The quick brown fox jumps over the lazy dog
.type-heading-md · 18px/28px · weight 650
The quick brown fox jumps over the lazy dog
.type-heading-sm · 14px/20px · weight 650
The quick brown fox jumps over the lazy dog
.type-heading-xs · 12px/16px · weight 650
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 | Mona Sans VF | 24px (1.5rem) | 32px (2rem) | 700 |
type-heading-xl | Mona Sans VF | 20px (1.25rem) | 28px (1.75rem) | 700 |
type-heading-lg | Mona Sans VF | 18px (1.125rem) | 28px (1.75rem) | 700 |
type-heading-md | Mona Sans VF | 18px (1.125rem) | 28px (1.75rem) | 650 |
type-heading-sm | Mona Sans VF | 14px (0.875rem) | 20px (1.25rem) | 650 |
type-heading-xs | Mona Sans VF | 12px (0.75rem) | 16px (1rem) | 650 |
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.
.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>