Typography¶
"The mind map is a blank canvas. Different world, different rules."
Why different fonts from the main site?¶
The main site uses Inter everywhere — it's sharp, professional, invisible (you read it without noticing it). That's perfect for UI.
Mind maps are visual content — closer to posters or infographics than to web pages. They need typography with personality, warmth, and visual hierarchy that grabs attention. Inter is designed to disappear; mind map headings need to appear.
Not breaking Zen
This isn't inconsistent with the Zen Design System. Zen's typography doc says "the best typography is the one you don't notice — you just read." For UI, that means Inter. For visual content, that means fonts chosen for visual impact and storytelling. Different context, different optimal choice.
Font pairing¶
Headings → Plus Jakarta Sans¶
Used for: Root titles, branch headings (L0, L1 nodes)
| Property | Value |
|---|---|
| Source | Google Fonts |
| Weights | SemiBold (600), Bold (700), ExtraBold (800) |
| Feel | Geometric, modern, rounded letterforms |
| Cost | Free, CDN-served |
Why Plus Jakarta Sans?
- Slightly rounded terminals match our fluid/curved visual language (rounded nodes, Bezier links)
- Beautiful in bold — has real personality without being decorative
- Used by Linear, modern design-forward products
- Geometric like Inter (harmonises) but warmer and more inviting
Zen rejected this for the site
The Zen typography doc rejected Plus Jakarta Sans as "too rounded/friendly" for the site UI. Exactly right — too friendly for UI chrome, but perfect for visual storytelling content. Context matters.
Labels → DM Sans¶
Used for: Node text, detail labels, tags (L2, L3, metadata)
| Property | Value |
|---|---|
| Source | Google Fonts |
| Weights | Regular (400), Medium (500), SemiBold (600) |
| Feel | Clean geometric, compact, precise |
| Cost | Free, CDN-served |
Why DM Sans?
- Outstanding readability at tiny sizes (9-11px)
- Compact letterforms — fits more text in pills and cards
- Slightly technical feel at small sizes = perfect for detail nodes
- Geometric like Jakarta (harmonises) but more restrained
Size hierarchy¶
| Level | Font | Weight | Size | Use |
|---|---|---|---|---|
| Title | Plus Jakarta Sans | ExtraBold (800) | 22-26px | Root node — "M365 Copilot" |
| Branch | Plus Jakarta Sans | SemiBold (600) | 14-16px | L1 categories — "Apps", "Security" |
| Node | DM Sans | Medium (500) | 11-13px | L2-L3 items — "Draft emails", "RBAC" |
| Tag | DM Sans | SemiBold (600) | 9-10px | Metadata — "New", "$30/mo", "Preview" |
Rules¶
- Minimum readable size: 9px — never go smaller, even for tags
- Title must be readable without zooming — if the title needs zoom, the map is too big
- Contrast ratio ≥ 4.5:1 for all text against its background
- No uppercase for nodes — sentence case reads faster. Tags CAN use uppercase for emphasis
- Letter-spacing: +0.01em on tags for tiny-size legibility
Loading¶
Both fonts are loaded only on mind map pages (not site-wide) via a single Google Fonts <link> tag:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
In the SVG renderer:
// Title node
.attr('font-family', "'Plus Jakarta Sans', Inter, sans-serif")
.attr('font-weight', '800')
.attr('font-size', '24px')
// Detail node
.attr('font-family', "'DM Sans', Inter, sans-serif")
.attr('font-weight', '500')
.attr('font-size', '12px')
Inter is the fallback — if Google Fonts fails to load, Inter (already on the page) takes over. The map still works, just with less personality.
Comparison with competitors¶
| Font choice | Feel | |
|---|---|---|
| entra.news | System/default | Fine but generic |
| m365maps | Arial | Corporate, dated, zero personality |
| Us | Plus Jakarta Sans + DM Sans | Modern, warm, purpose-chosen for visual storytelling |
The font pairing is a small detail that creates a big gap between "this is a technical diagram" and "this is beautiful, I want to share it".