Ecology / Foundations / Typography Typography One fluid type scale that interpolates between a small-screen min and a large-screen max, two font families, and and a set of composite tokens that bundle family, size, weight, line-height and tracking under one name.
Font families DM Sans carries the entire UI. DM Mono is reserved for code, tokens and tabular figures.
Aa Bb Cc 0123
--typography-font-family-sans 'DM Sans', sans-serif UI, body, headings
Aa Bb Cc 0123
--typography-font-family-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
--font-size-050 8px → 10px
The quick brown fox
--font-size-100 10px → 12px
The quick brown fox
--font-size-150 11px → 14px
The quick brown fox
--font-size-200 12px → 15px
The quick brown fox
--font-size-250 13px → 17px
The quick brown fox
--font-size-300 14px → 18px
The quick brown fox
--font-size-400 16px → 20px
The quick brown fox
--font-size-500 18px → 24px
The quick brown fox
--font-size-600 22px → 30px
The quick brown fox
--font-size-700 26px → 36px
The quick brown fox
--font-size-800 32px → 44px
The quick brown fox
--font-size-900 40px → 54px
The quick brown fox
--font-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
--typography-font-weight-light 300
Regular
--typography-font-weight-regular 350
Medium
--typography-font-weight-medium 500
Semibold
--typography-font-weight-semibold 550
Bold
--typography-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-none 1 Single-line control labels — the box supplies the height
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, helper text
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 No tracking — tabular figures, mono runs
Tracking sample · ESA Ecology
--letter-spacing-default 0.01em Body and UI — 21 of 24 composites
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
Composites
A composite bundles the five tier-2 --typography-* tokens for one intention, and
ships as a class because CSS has no composite custom property. The class carries the same name
as its tokens — .typography-body-sm assembles
--typography-body-sm-*. Nothing here restates a size or a
weight — every value is a var(), so re-pointing
--typography-heading-lg-font-size moves every large heading without touching
the class.
Names are typography-<intention>[-<variant>]: category, then the job the
text does, then a t-shirt size where an intention has more than one. Where a composite lists a
former name, that class still works as a deprecated alias — same tokens, same output — so
migrating is a find-and-replace with no visual change.
Open a composite to see the individual tokens it bundles. Note that font-size,
line-height and letter-spacing point straight at a tier-1 value,
while font-family and font-weight point at another tier-2
role first (--typography-font-family-display, --typography-font-weight-semibold). That extra hop
is deliberate: those two are the surface a spoke re-points when it swaps typeface, and a face
change has to move every role at once rather than role by role.
The quick brown fox
.typography-display size-800 · bold · tight --typography-display-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-heading-lg size-600 · semibold · tight --typography-heading-lg-* was .type-page-title
Tier-2 token Points at Resolves to
The quick brown fox
.typography-heading-md size-500 · semibold · tight --typography-heading-md-* was .type-section-title
Tier-2 token Points at Resolves to
The quick brown fox
.typography-title size-400 · medium · normal --typography-title-* was .type-card-title
Tier-2 token Points at Resolves to
The quick brown fox
.typography-body-lg size-300 · regular · relaxed --typography-body-lg-* was .type-body-large
Tier-2 token Points at Resolves to
The quick brown fox
.typography-body-md size-200 · regular · relaxed --typography-body-md-* was .type-body
Tier-2 token Points at Resolves to
The quick brown fox
.typography-body-sm size-150 · regular · normal --typography-body-sm-* was .type-body-small
Tier-2 token Points at Resolves to
The quick brown fox
.typography-body-xs size-100 · regular · normal --typography-body-xs-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-body-2xs size-050 · regular · normal --typography-body-2xs-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-label-lg size-300 · medium · normal --typography-label-lg-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-label-md size-200 · medium · normal --typography-label-md-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-label-sm size-150 · medium · normal --typography-label-sm-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-label-xs size-100 · medium · normal --typography-label-xs-* was .typography-label
Tier-2 token Points at Resolves to
The quick brown fox
.typography-label-2xs size-050 · medium · normal --typography-label-2xs-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-label-lg-strong size-300 · semibold · normal --typography-label-lg-strong-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-label-md-strong size-200 · semibold · normal --typography-label-md-strong-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-label-sm-strong size-150 · semibold · normal --typography-label-sm-strong-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-label-xs-strong size-100 · semibold · normal --typography-label-xs-strong-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-label-2xs-strong size-050 · semibold · normal --typography-label-2xs-strong-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-title-strong size-400 · semibold · normal --typography-title-strong-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-meta size-100 · regular · normal --typography-meta-* was .type-caption
Tier-2 token Points at Resolves to
The quick brown fox
.typography-eyebrow-md size-100 · semibold · uppercase --typography-eyebrow-md-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-eyebrow-sm size-050 · semibold · uppercase --typography-eyebrow-sm-* was .type-overline
Tier-2 token Points at Resolves to
The quick brown fox
.typography-code-lg mono · size-300 --typography-code-lg-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-code-md mono · size-200 --typography-code-md-*
Tier-2 token Points at Resolves to
The quick brown fox
.typography-code-sm mono · size-150 --typography-code-sm-* was .type-code
Tier-2 token Points at Resolves to