Typography
Typography in v2 follows the rhythm of Estonia’s TEDI design system: three font weights only, a large H1 set in Light (300), and the lower headings set in Regular instead of Bold. We keep Noto Sans as the typeface so the Kaharagian voice stays intact.
Font Family
Noto Sans is chosen for its excellent readability, wide language support, and availability as a free, open-source font. It works well for both headings and body text. See the Fonts page for downloads, installation guidance, and the full Noto font family.
--font-heading: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', 'Consolas', monospace;Font Weights
v2 ships with three weights — Light (300), Regular (400), and Bold (700). We do not use 500 or 600, which mirrors TEDI’s loader and keeps the payload small. Each visible weight maps to a real glyph from the font file, so there is no faux-bold rendering.
Light (300) — used for H1
Regular (400) — body text, H2–H5
Bold (700) — H6, strong, buttons, labels
Heading Styles
H1 is set in Light 300, the TEDI signature: large and quiet rather than large and loud. H2–H5 are Regular 400, which lets the hierarchy come from size and spacing rather than from progressively heavier weight. H6 is Bold 700 and is the only heading that visually matches inline <strong>.
Heading hierarchy guidance
H1 should only be used within hero sections or landing page banners. For standard content pages, use H2as the page title and H3–H6 for subsections. This ensures consistent visual hierarchy across government services.
H1 — Hero sections only · Light 300 · 40 px mobile → 56 px desktop
The quick brown fox jumps
H2 — Page titles · Regular 400 · 30 px mobile → 40 px desktop
The quick brown fox jumps over
H3 — Section headings · Regular 400 · 24 px mobile → 32 px desktop
The quick brown fox jumps over the lazy dog
H4 — Subsection headings · Regular 400 · 20 px mobile → 24 px desktop
The quick brown fox jumps over the lazy dog
H5 — Small headings · Regular 400 · 18 px
The quick brown fox jumps over the lazy dog
H6 — Smallest headings · Bold 700 · 16 px
The quick brown fox jumps over the lazy dog
Body Text
Lead text · 20 px · Regular 400 — introductory paragraphs
This is lead paragraph text. Use it for introductory content at the top of pages or sections. It's slightly larger than body text to create visual hierarchy.
Body text · 16 px · Regular 400 — default paragraph text
This is standard body text at 16 px (the TEDI default). The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!
Small text · 14 px · secondary information
This is small text at 14 px. Use for captions, helper text, or secondary information.
Extra small text · 12 px · labels and metadata
This is extra small text at 12 px. Use sparingly for labels, timestamps, or metadata.
Line Heights
- Tight (1.2) — large headings (H1, H2)
- Snug (1.3) — medium headings (H3)
- Normal (1.5) — body text and smaller headings
- Relaxed (1.625) — lists and content with more breathing room
CSS Variables
/* Text Scale (TEDI: 16px body) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
/* Heading Scale (mobile → desktop via media queries) */
--heading-2xs: 1rem; /* 16px — h6 */
--heading-xs: 1.125rem; /* 18px — h5 */
--heading-sm: 1.25rem; /* 20px — h4 */
--heading-md: 1.5rem; /* 24px — h3 */
--heading-lg: 1.875rem; /* 30px — h2 */
--heading-xl: 2.25rem; /* 36px — h1 */
--heading-2xl: 2.5rem; /* 40px — hero h1 */
/* Font Weights — TEDI uses three only */
--weight-light: 300; /* H1 */
--weight-regular: 400; /* body, H2–H5 */
--weight-bold: 700; /* H6, <strong>, buttons */