Typography

Fonts

Circular

  • Used for headlines. On screen, used for H1, H2, H3
  • Used for display text – big introductory text, quotations
  • Not used for body copy, navigation, UI microcopy
  • Not used in the products – only Atlassian brand touchpoints. See in-product typography for product usage.
BLACK

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

BOLD

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

MEDIUM

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

BOOK

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

Helvetica Neue

  • Not used for headlines but is a fall back if Circular can't be loaded
  • Primary use is for body copy, navigation, UI microcopy
  • In HTML/CSS, use – font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
BOLD

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

MEDIUM

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

REGULAR

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

LIGHT

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

Tisa

  • Used for humanizing the tone of copy of a single authored piece
  • Primary use is for blog posts, articles, press releases, and customer quotes on marketing materials
  • Secondary usage if for special long form copy such as in printed books or legal documents
  • Not used for headlines
  • Not used for marketing-related product tours or stories
BOLD

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

BOLD ITALIC

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

MEDIUM

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

MEDIUM ITALIC

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

REGULAR

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

REGULAR ITALIC

The quick brown fox jumps over the lazy dog.
1234567890!@#$%^&*

Web styles

These are the typography styles for Atlassian websites. The default color is Navy or use Cyan and White if the background fill color is also Navy.

For print use, follow the same basic rules and proportions, while increasing size proportionally to the size of the print piece.

Example Specs Description

Headline

  • 60px bold centered
  • 64px effective line-height
  • -1px letter-spacing
  • Circular
Used for the H1 headline in the hero area. Should only be used once per page. Colors used only from the primary palette.

Sub-headline

  • 20px regular centered
  • 32px effective line-height (1.6)
  • Helvetica
The sub-headline appears directly below the headline.

First level heading

  • 32px bold
  • 40px effective line-height (1.25)
  • Circular
Used for regular H1 headlines. Usually paired with supporting content. Colors used only from the primary palette.

Second level heading

  • 24px bold
  • 40px effective line-height (1.67)
  • Circular
Used for H2 headlines. Usually paired with paragraph text. Colors used only from the primary palette.

Third level heading

  • 20px bold
  • 32px effective line-height (1.6)
  • Circular
Used for H3 sub-headlines. Usually paired with paragraph text and nested under an H2 copy block. Colors used only from the primary palette.

Fourth level heading

  • 16px bold
  • 24px effective line-height (1.5)
  • Helvetica Neue
Used for H4 sub-headlines. Usually paired with paragraph text and nested under an H3 copy block. Colors used only from the primary palette.
Fifth level heading
  • 14px bold
  • 24px effective line-height (1.71)
  • Helvetica Neue
Used for H5 sub-headlines. Usually paired with paragraph text and nested under an H4 copy block. Colors used only from the primary palette.
Special heading
  • 14px bold
  • 20px effective line-height (1.43)
  • Helvetica Neue
Used for special headings that aren't in a regular content flow. Colors used only from the primary palette.

This is intro text. We hope to draw your attention to it and encourage you to read further.

  • 24px
  • 36px effective line-height (1.5)
  • Circular Book
Used for a few sentences of introductory text leading into a section. Colors used only from the primary palette.

This is oversize paragraph copy. Used with short, punchy copy with lots of breathing room.

Blow ye winds, like the trumpet blows, but without that noise.

  • 16px regular
  • 24px effective line-height (1.5)
  • Helvetica Neue
Choose this oversize option when you have adequate space and copy length. The space between paragraphs is 14px line-height. Choose either regular or oversize paragraph copy within a document.

This is regular paragraph copy. Used for longer-form text blocks.

It's funny that pirates were always going around searching for treasure, and they never realized that the real treasure was the fond memories they were creating.

  • 14px regular
  • 20px effective line-height (1.43)
  • Helvetica Neue
Used for long-form text. Choose this oversize option when you have adequate space and reduced overall copy length. The space between paragraphs is 10px line-height.

This is blog copy. It is intended to humanize the content, afterall a human writes this stuff. Set type with heart and balance.

  • 20px regular
  • 32px effective line-height (1.6)
  • Tisa
Used for blog posts. The space between paragraphs is 16px line-height.

This is comments for blog posts. Smaller than the blog content copy, it is intended to humanize the love, support and trolls. If trolls step into the sunlight they turn to stone.

  • 16px regular
  • 24px effective line-height (1.5)
  • Tisa
Used for comments in blog posts. The space between paragraphs is 14px line-height.

Quotes from customers look amazing in serif italics!

  • 24px regular italic
  • 36px effective line-height (1.5)
  • Tisa
Used for customer quotes. Italics emphasize the enthusiasm coming from the positive feedback.

Baseline

The brand guidelines use a 4px baseline grid that typography sits on. The baseline grid is used to maintain a harmonious rhythm down the page.

Baseline type