Typography

Download our fonts by going to go/fonts (Atlassian employees only)

We use our custom font, Charlie Sans, for almost everything brand and marketing — from banner ads to billboards. It was designed to be incredibly versatile with lots of range in terms of tone and playfulness. It can be quirky and expressive when it needs to be, or neutral when the situation calls for something a bit more serious. On rare occasions, we also use native typography for selected elements.

Charlie is available in two styles, Display and Text.

We use native typography for all in-product experiences. This ensures that the UI is optimized to be highly legible, performs well, and is frictionless as you move between Atlassian products and the rest of the system.

We use sans serif fonts for most of our type in-product, the exception being when you want to display code then you should defer to monospace fonts.

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

font-family: 'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace;

Keeping typography consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to balance content and UI and to foster familiarity.

The default appearance of typography in Atlassian Design System uses the UI properties. The use of long form properties is up to individual products.

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 will break up content into easily digestible information.

Readers may also have control over the layout width, meaning that a line length can not always be specified. So it's good practice to design for an ideal line length range under normal circumstances, and use responsive design techniques to anticipate different contexts.

When displaying content in a fluid layout, set the max-width (680 in the example below). When the viewport is resized and the content has reached the max-width, the container will continue to expand with even margins on either side. When the viewport has been resized and the content is below the max-width, the content will snap to 100% of the container with the specified margins on either side.

Our service sites use a mixture of both marketing and product typography and is assessed on a case-by-case basis depending on the following considerations:

• Atlassian messaging vs. user-generated or modified content

• editorial content vs. technical content

• brand marketing visual styles vs. product UI visual styles

• consistency across sites vs. one-off solutions

Please work directly with the Creative & Design teams when assessing typography for these types of properties.

Atlassian relies on several third-party services to provide content and information to Atlassian employees, partners, and sometimes, users. Most information in most third-party portals and services should maintain their native styling. This means that we should not override most of the default elements, styles or layouts. However, there are several Atlassian brand assets that can be used to imply authorship, endorsement, or affiliation with a given service.

For implementation details consult AUI.