Ecology / Foundations / Typography Typography One fluid type scale that interpolates between a small-screen min and a large-screen max, two font families, and a set of semantic type roles that compose size, weight, line-height and tracking into one class.
Font families DM Sans carries the entire UI. DM Mono is reserved for code, tokens and tabular figures.
Aa Bb Cc 0123
--font-sans 'DM Sans', sans-serif UI, body, headings
Aa Bb Cc 0123
--font-mono 'DM Mono', monospace Code, tabular data, tokens
Type scale Each size is a clamp() — rendered here at its live computed value. The range shows the min (mobile) to max (desktop) px bounds.
The quick brown fox
--type-size-050 8px → 10px
The quick brown fox
--type-size-100 10px → 12px
The quick brown fox
--type-size-150 11px → 14px
The quick brown fox
--type-size-200 12px → 15px
The quick brown fox
--type-size-250 13px → 17px
The quick brown fox
--type-size-300 14px → 18px
The quick brown fox
--type-size-400 16px → 20px
The quick brown fox
--type-size-500 18px → 24px
The quick brown fox
--type-size-600 22px → 30px
The quick brown fox
--type-size-700 26px → 36px
The quick brown fox
--type-size-800 32px → 44px
The quick brown fox
--type-size-900 40px → 54px
The quick brown fox
--type-size-1000 48px → 64px
Font weights DM Sans is set on a custom axis — weights are intentionally a touch lighter than the usual 400/500/600/700 to read cleaner on screen.
Light
--font-weight-light 300
Regular
--font-weight-regular 350
Medium
--font-weight-medium 450
Semibold
--font-weight-semibold 550
Bold
--font-weight-bold 650
Line heights Ecology is a token-driven Angular component library. Line height controls vertical rhythm — tighter for headings, looser for sustained reading.
--line-height-tight 1.3 Headings, dense titles
Ecology is a token-driven Angular component library. Line height controls vertical rhythm — tighter for headings, looser for sustained reading.
--line-height-normal 1.6 UI text, labels
Ecology is a token-driven Angular component library. Line height controls vertical rhythm — tighter for headings, looser for sustained reading.
--line-height-relaxed 1.8 Long-form body copy
Letter spacing Tracking sample · ESA Ecology
--letter-spacing-tight -0.01em Large headings
Tracking sample · ESA Ecology
--letter-spacing-normal 0.01em Body and UI
Tracking sample · ESA Ecology
--letter-spacing-wide 0.03em Small caps emphasis
Tracking sample · ESA Ecology
--letter-spacing-wider 0.06em Overlines, all-caps labels
Type roles Utility classes that bundle the four type properties together. Components reference these instead of hand-tuning sizes — change a role once, it updates everywhere.
The quick brown fox
.type-display size-800 · bold · tight
The quick brown fox
.type-page-title size-600 · semibold · tight
The quick brown fox
.type-section-title size-500 · semibold · tight
The quick brown fox
.type-card-title size-400 · medium · normal
The quick brown fox
.type-body-large size-300 · regular · relaxed
The quick brown fox
.type-body size-200 · regular · relaxed
The quick brown fox
.type-body-small size-150 · regular · normal
The quick brown fox
.type-label size-100 · medium · normal
The quick brown fox
.type-caption size-100 · regular · normal
The quick brown fox
.type-overline size-050 · semibold · uppercase
The quick brown fox
.type-code mono · size-100