Typography

Typographic elements

Semantic hierarchy

Establish a visual and semantic hierarchy by nesting headings correctly. For example, an H3 follows an H2 when it denotes a section contained within the H2's content. Don't skip to an H4 after an H2, etc. Don't use headings arbitrarily based on their presentation.

Element Pixel sizes Description

Page title

32px

The main page heading is an H1 element. You should only use it once per page

Heading

24px

The secondary heading to the left is an H2 element, which may be used as a page-level heading. More than one may be used per page

Third-level heading

20px

The heading to the left is an H3 element, which may be used after an H2 heading in the document hierarchy

Fourth-level heading

16px bold

The heading to the left is an H4 element, which may be used after an H3 heading in the document hierarchy
Fifth-level heading
14px bold
The heading to the left is an H5 element, which may be used after an H4 heading in the document hierarchy
Sixth-level heading
12px uppercase bold
The heading to the left is an H6 element, which may be used after an H5 heading in the document hierarchy
This is a paragraph, using Arial, with 14px font size and 20px line height. 14px

Within our guidelines the paragraph <p> demonstrates the generic font, color, and vertical rhythm. The paragraph is composed with a line height of 20px.

This value is known as baseline, as it sets the distance between each line where the text "sits". The 20px value is our ideal vertical rhythm, but for general purposes we derived from it a grid of 10px to be used through out our design language. Doing so establishes a consistent tone for the user interface and increases the probability of elements sharing the same alignment/baseline even if set within different columns and/or contexts.

General text formatting

Element Pixel sizes Description
Bold text 14px Use the <strong> for bolding text
Italic text 14px Use the <em> for italic text
Small text 12px Small text <small> is used primarily as help text under form fields and as secondary supporting text in applications. Use sparingly.
Hyperlink 14px

Unless specified by another component in the Atlassian Design Guidelines, hyperlinks use the standard hyperlink color #3572b0 and are not underlined except on hover

In the case of user generated content, a user's semantic structure choice trumps their presentational choice. Thus, the default hyperlink treatment outweighs a color applied to the containing context of a link. If the user has the ability to apply a color choice directly to a link, and only to the link, then the product can respect the user's color choice.

  1. This is an unordered list
  2. With three list items
  3. As a possible example
14px Use ordered lists to semantically group items in a pre-determined order
  • This is an unordered list
  • With three list items
  • As a possible example
14px Use unordered lists to semantically group related items

This is a blockquote

14px
This is a an inline quote 14px
<div class="foo">
    <h1>Example code snippet</h1>
</div>
            
12px Used for displaying inline code blocks

Line lengths and readability

Where possible, products should aim for a maximum line length of 100 characters per line (including spaces).

As users often have control over the layout width (fluid layout), a line length can not always be specified. Design for an ideal line length range under normal circumstances and use responsive design techniques to anticipate different viewport contexts.