Manrope is the current digital typeface. Chalet is the historical one.
Manrope modernizes the original Irozon identity for digital use while preserving its
clean, geometric and forward-looking character. As of Phase 2, this scale is shipped
as ten reusable .type-* classes in src/index.css (@layer components) and applied across every public page — see docs/design/irozon-design-audit.md for
the migration record.
Current digital typeface
Manrope
Self-hosted variable font (weight axis 200–800). Primary typeface for irozon.se, UI, marketing pages and future Irozon digital products, rendered live throughout this page.
Historical brand typeface
Chalet
Preserved as brand heritage, not embedded here or in production — no confirmed web license. Do not download it from unlicensed "free font" sources; it is not part of the historical logo design either, which is artwork, not type.
Weight system — disciplined, not arbitrary
- Display XL / Display L / H1 / H2 — weight 700
- H3 — weight 600
- Body Large / Body / Body Small — weight 400
- Label — weight 600
- Caption — weight 500
Tracking & line-height rules
- Tracking (letter-spacing) is size-specific, never one fixed value. Large display text tightens (-0.02em to -0.03em) because letters read too far apart as they grow; Label/Caption relax to slightly positive tracking (+0.03em to +0.06em) for legibility at small sizes.
- Line-height tracks size inversely — tight on large headings (0.98–1.15) so a multi-line display doesn't feel loose, looser on body copy (1.55–1.65) so paragraphs stay easy to scan.
- Never apply a heading's negative tracking to body text — it reads as cramped, not premium.
- Build hierarchy from weight + size + line-height together, not size alone — see the Weight system above.
Good vs. bad typography
One heading weight, one body weight, sizes drawn from the scale above. Hierarchy comes from the size/weight jump, not decoration.
Everything bold, uppercase used as a heading style rather than a rare Label treatment, and three unrelated sizes stacked with no scale logic — nothing reads as "the important part" because everything is fighting for it.
Typography on dark
Dark-theme text uses the same weight system and scale as light mode — only the color values change, and Primary Text is a soft off-white rather than pure white so long blocks of copy don't glare.
Body copy — Secondary Text. Comfortable line-height, same rules as light mode, just re-tuned for a dark surface instead of white.
Muted / caption text — for helper copy, timestamps and metadata.
A link on dark — Lime, not Green, so it never reads as a buttonLinks on dark surfaces use Lime rather than Green — Green stays reserved for actions (buttons), so a reader can tell "this is clickable text" apart from "this is the primary action" at a glance, on both themes.