Typography
Atlassian Design System — Typography
Overview
Typography is the system of fonts and text styles for Atlassian product interfaces. It enhances communication, reinforces brand, and guides users' emotions. Atlassian has moved its app suite to a refreshed typography system based on the Atlassian Sans and Atlassian Mono typefaces.
Typefaces
Atlassian uses different typefaces for different contexts:
App fonts (in-product use)
| Font | Use |
|---|---|
| Atlassian Sans | All in-app UI text — headings, body, labels, UI chrome |
| Atlassian Mono | Code, inline code, terminal output |
App fonts are optimized for product interfaces and ensure consistency across all browsers and Atlassian apps.
Font family stacks:
- Heading/Body:
"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, system-ui, sans-serif - Code:
"Atlassian Mono", ui-monospace, Menlo, 'Segoe UI Mono', Ubuntu Mono, monospace
Brand fonts (marketing only)
| Font | Use |
|---|---|
| Charlie Display | Brand headings in marketing, editorial |
| Charlie Text | Brand body text in marketing, editorial |
Brand fonts are not used in product interfaces. They are available to authenticated users via Atlassian Brandfolder.
Typographic Principles
- Optimize for readability — Enhance communication regardless of user ability
- Create visual harmony — Consistent and cohesive; use hierarchy and space to simplify complex information
- Contextualize for different users — Tailor for different preferences, OS, and applications
Token System
Typography is expressed through font.* tokens. Unlike CSS properties, the token encodes the full set of typographic values (size, weight, line-height) in a single shorthand.
Token naming structure
font.<category>.<scale>
Heading tokens
| Token | Size | Line-height | Weight |
|---|---|---|---|
font.heading.xxlarge | 2rem (32px) | 2.25rem | 653 (bold) |
font.heading.xlarge | 1.75rem (28px) | 2rem | 653 |
font.heading.large | 1.5rem (24px) | 1.75rem | 653 |
font.heading.medium | 1.25rem (20px) | 1.5rem | 653 |
font.heading.small | 1rem (16px) | 1.25rem | 653 |
font.heading.xsmall | 0.875rem (14px) | 1.25rem | 653 |
font.heading.xxsmall | 0.75rem (12px) | 1rem | 653 |
Body tokens
| Token | Size | Line-height | Weight |
|---|---|---|---|
font.body.large | 1rem (16px) | 1.5rem | 400 |
font.body | 0.875rem (14px) | 1.25rem | 400 |
font.body.small | 0.75rem (12px) | 1rem | 400 |
Code token
| Token | Size | Line-height |
|---|---|---|
font.code | 0.875em | 1 |
Font weights
| Token | Value |
|---|---|
font.weight.regular | 400 |
font.weight.medium | 500 |
font.weight.semibold | 600 |
font.weight.bold | 653 |
Note: Weight 653 is Atlassian's custom bold — a non-standard value tuned for Atlassian Sans rendering.
Rem Units
Typography tokens use rem units rather than px for font-size and line-height. At the browser default of 16px:
1rem = 16px0.875rem = 14px0.75rem = 12px
Rem units scale with the user's browser font size preference, improving accessibility and responsiveness.
Heading Usage
- Use headings to introduce sections of content, not for visual emphasis alone
- Headings must follow a descending hierarchy (
h1→h2→h3) without skipping levels - Only one
h1per page (typically the page title) - Use heading components from
@atlaskit/headingrather than raw HTML elements, to ensure correct token application
Component Implementation
Typography tokens are applied automatically when using Atlassian's Heading and Text components:
yarn add @atlaskit/heading
yarn add @atlaskit/primitives
For custom implementations, apply font.* tokens via CSS custom properties (prefixed --ds-font-*) from the @atlaskit/tokens package.