Typography

Text is the main way that teams visualize content and complete their work, so we've developed a typographic landscape that uses system fonts for all standard typefaces in Atlassian products. This ensures that the UI is highly legible, performs well, and is frictionless as you move between Atlassian products and the rest of the system.

Font stacks

Sans-serif

OS Font family
Windows Segoe UI
macOS & iOS SF UI Text
SF UI Display
Helvetica Neue (fallback)
Chrome OS & Android Roboto
Noto Sans (fallback)
Droid Sans (fallback)
Ubuntu Ubuntu
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif;

Monospaced

OS Font family
Windows Segoe UI Mono
macOS & iOS SF Mono
Menlo (fallback)
Chrome OS & Android Roboto Mono
Ubuntu Ubuntu Mono
All Courier
font-family: SFMono-Medium, "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Courier, monospace;

Usage

Keep consistent and stick to logical hierarchies to ensure that elements in the UI are clear and easily recognizable when scanning the page. We selected our text sizes, styles and layouts to balance content and UI, and to foster familiarity. Type sizes are specified with scaleable pixels (sp) to enable large type modes for accessibility.

Styles

Text size h800

Basic properties

Font size: 29px
Font weight: 600 / Semibold
Character spacing: -0.01em
Color: N800
Line height: 32px

Suggested usage

Empty states and feature introductions

Text size h700

Basic properties

Font size: 24px
Font weight: 500 / Medium
Character spacing: -0.01em
Color: N800
Line height: 28px

Suggested usage

Main titles, but use only once per page

Text size h600

Basic properties

Font size: 20px
Font weight: 500 / Medium
Character spacing: -0.008em
Color: N800
Line height: 24px

Suggested usage

Headings that identify key functionality

Text size h500

Basic properties

Font size: 16px
Font weight: 500 / Medium
Character spacing: -0.006em
Color: N800
Line height: 20px

Suggested usage

Sub-section and field group headings

Text size h400

Basic properties

Font size: 14px
Font weight: 600 / Semibold
Character spacing: -0.003em
Color: N800
Line height: 20px

Suggested usage

Deep headings, and for highlighting important pieces of information

Text size h300

Basic properties

Font size: 12px
Font weight: 600 / Semibold
Character spacing: 0
Color: N800
Line height: 16px

Suggested usage

Heading above a group of list items

Text size h200

Basic properties

Font size: 12px
Font weight: 600 / Semibold
Character spacing: 0
Color: N200
Line height: 16px

Suggested usage

Low level headings

Text size h100

Basic properties

Font size: 11px
Font weight: 700 / Bold
Character spacing: 0
Color: N200
Text transform: Uppercase
Line height: 16px

Low level headings

Paragraph - We spend a huge amount of our time at work. So the more that time doesn’t feel like “work,” the better. We can be serious, without taking ourselves too seriously. We strive to put what’s right for the team first – whether in a meeting room or on a football pitch.

Basic properties

Font size: 14px
Font weight: 400 / Regular
Character spacing: -0.006em
Color: N800
Line height: 20px

Suggested usage

Anything from a couple of words to long description fields

Formatting

Style Size Conte
Bold 14px Use the <STRONG> to emphasize text.
Italics 14px Use the <EM> to italicize text.
Small 12px Small text <SMALL> is used primarily as help text under form fields and as secondary supporting text in applications and should be used sparingly.
Link 14px

Use when you are linking just a few words of text, or when a link is standalone. For lists of objects that are not mixed with paragraphs, such as a list of recent issues or commits in a side panel, use the default neutral color.

Unless otherwise specified, hyperlinks use color B400 and are not underlined except on hover.

For user generated content, changing the color choice for a whole element, for example an H2 heading, will still display in the default hyperlink color. If the user can apply a color choice directly to a link, then the product should respect that new color choice.

  1. Here, an ordered list
  2. With three list items for you
  3. As an example
14px Use ordered lists to group items in a pre-determined order. Should have a line height of 20px.
  • See, an unordered list
  • For you to show items in
  • A less ordered way
14px Use unordered lists to group related items. Should have a line height of 20px.
A blockquote
14px Use when a quotation that is typically longer than a few lines. It will be indented to set it apart from surrounding text.
<div class="foo">
<h1>Example code snippet</h1>
</div>
12px Use for displaying inline code blocks.

Line length

Set the reading environment to suit the reader. Wide lines of text are difficult to read and make it harder for people to focus. While there is no right way to measure the perfect width for text, a good goal is to aim for between 60 and 100 characters per line including spacing. Setting an optimal line length breaks up content into easily digestible blocks.

Readers may also have control over the layout width, which means that you can't always specify a line length for them. So it's good practice to design for an ideal line length range under normal circumstances, and use responsive design techniques to plan for different contexts.