Use text styles when designing in Figma, and typography tokens and components in code. Use the heading component for heading text, and the text component for body text.
The following table outlines our Figma text styles, their corresponding typography tokens, and suggestions for when and where to apply them.
Figma text style | Token | Properties | Suitable for |
---|---|---|---|
Heading | |||
Heading / XXL (H900) | font.heading.xxlarge | Brand and marketing content. | |
Heading / XL (H800) | font.heading.xlarge | ||
Heading / L (H700) | font.heading.large | Product page titles such as forms. | |
Heading / M (H600) | font.heading.medium | Headers in large components, such as modal dialogs. | |
Heading / S (H500) | font.heading.small | Headers in small components where space is limited, such as flags. | |
Heading / XS (H400) | font.heading.xsmall | ||
Heading / XXS (H200) | font.heading.xxsmall | Headers in fine print or tight spaces. Use sparingly. | |
Body | |||
Body / L / Regular ^ | font.body.large | font.weight.regular | Long-form content such as blogs.The default size for reading text in long paragraphs. |
Body / L / Medium ^ | font.body.large | font.weight.medium | |
Body / L / Bold ^ | font.body.large | font.weight.bold | |
Body / M (Default) / Regular | font.body | font.weight.regular | Short text, such as descriptions in flags, or labels in buttons.The default size for text in components, and short content. |
Body / M (Default) / Medium ^ | font.body | font.weight.medium | |
Body / M (Default) / Bold ^ | font.body | font.weight.bold | |
Body / S / Regular | font.body.small | font.weight.regular | Secondary level content such as fine print or semantic messaging.Use sparingly. |
Body / S / Medium ^ | font.body.small | font.weight.medium | |
Body / S / Bold ^ | font.body.small | font.weight.bold | |
Code | |||
Code / Regular | font.code | For use in code block only. |
^ Modernized typography system only.
Follow these guidelines when using tokens and text styles, to create a seamless and consistent user experience across platform experiences.
Use the Atlassian space tokens and color tokens in conjunction with typography to align to the design foundations.
Typography tokens and components have been designed with accessibility considerations. Some people need to read text on different screen sizes or at different magnification levels. Coding your typographic experiences correctly helps assistive technology interpret the structure of your content.
To ensure product experiences are accessible for all our users, ensure you do the following:
Accommodate people who use assistive technologies and their reading preferences with responsive text, typography tokens use relative values (rem) to determine font size on different browser default sizes.
Use text styles (in Figma) and typography tokens and components (in code) to ensure a legible font family, font size and visual hierarchy between text styles.
Use text color tokens to achieve minimum color contrast for legibility.
Apply correct HTML tag hierarchy, to ensure assistive technologies interpret your experiences correctly.
Follow established experience patterns for interactions using text.
The general guidance for comfortable reading is to use a minimum font size of 16px for long-form text such as blogs. The smallest font size available in the Atlassian Design System typography tokens is 12px, avoid using except for fine print.
Visit our accessibility documentation to understand more about accessible design.
Use headings for page titles and subheadings to introduce content. They help readers scan and understand the structure of content.
![](http://images.ctfassets.net/8j5aqoy0ts8s/4pedI3jL7hv1LHfxA9Zlux/969ec0530148ccbd49871c4bddefb716/Imagedo_heading_1.jpg)
Do
Write succinct and clear headings to summarise content on a page or section.
![](http://images.ctfassets.net/8j5aqoy0ts8s/7fqU6f0XU1yEK8vZi0x8hI/e2cebb8f875e6df5dcc0783267fab101/Imagedont_heading_1.jpg)
Don’t
Don’t write overly long titles. Use shorter titles that can be viewed easily on all screen sizes.
![](http://images.ctfassets.net/8j5aqoy0ts8s/1D2Eb92pE3R58u4TiCAQY0/b4bb73138ec1fdaf3df938496ddac83c/Imageheading_do_2.png)
Do
Use large headings to draw attention to content.
![](http://images.ctfassets.net/8j5aqoy0ts8s/35Lo5L7mnyEvFfcupuA2Oe/3c77fe856585e96f57df7de982ae37fe/Imageheading_don-t_2.png)
Don’t
Don’t use heading sizes smaller than the body font size. Use headings equal or less than twice the body font size.
![](http://images.ctfassets.net/8j5aqoy0ts8s/MQdc76jO27SsPWVdhRB4B/a202dfca786f069c46e8d461deb4f1d0/Imagehedaing_do_3.jpg)
Do
Clearly differentiate heading sizes to create hierarchy.
![](http://images.ctfassets.net/8j5aqoy0ts8s/6v5im9lnIDjVucPtK8gOiQ/e2b4166d56ef382b22245889d41c2611/Imageheading_don-t_3.jpg)
Don’t
Don’t use similar heading sizes for different heading levels. Use between 2-4 heading size difference between levels.
Use body text for the main content. You can use body text after headings or subheadings, for example as detailed descriptions and messages, but it may also be used as standalone text in components.
In Figma, paragraph spacing is set for body text styles only. To represent paragraphs in code, use separate text components for each paragraph and manage paragraph spacing with the stack component.
![](http://images.ctfassets.net/8j5aqoy0ts8s/yF7OjrlaQZIuMBoR16k6I/ccb7e5a6539c6910e33c00fd52826623/Imagebody_do_1.jpg)
Do
Use body text for paragraphs of text such as descriptions or blogs.
![](http://images.ctfassets.net/8j5aqoy0ts8s/4DE5TXzC9JCNVQEyJBo44F/a45958f0447c76e880ddc6e06f463def/Imagebody_don-t_1.png)
Don’t
Don’t use body text for headings. That’s what headings are for!
![](http://images.ctfassets.net/8j5aqoy0ts8s/1th8qB42IoK3DhPZQKYOff/f3c99998209d899aeb2a809ae11b38bb/Imagebody_do_2.jpg)
Do
Use body text in components such as buttons, inputs, lozenges and menus.
![](http://images.ctfassets.net/8j5aqoy0ts8s/xQc0ktmCo07fxEXLBWK95/f7409ff5683670d8810db255e060fe24/Eyebrow_examplebody_don-t_2.png)
Don’t
Don’t use heading text in components, instead use body text with a heavier font weight to create greater contrast.
![](http://images.ctfassets.net/8j5aqoy0ts8s/5RjtrxtYp1VQ8Z5Y3ZlDS/6b1b879161a1e8a70958d09ddd79fecf/Eyebrow_examplebody_do_3.png)
Do
Use the text styles and typography tokens. Body text has optimized line height for reading comfortably.
![](http://images.ctfassets.net/8j5aqoy0ts8s/2iW7HxSQHqCVcDB2TmQzUB/068f7b10014581cb831d1228d4b21c94/Eyebrow_examplebody_don-t_3.png)
Don’t
Don’t adjust line heights to fit text, cramped text is more difficult to read.
Use code text to represent code only, either inline or in code blocks.
![An example of the code text style being used in a block of example code.](http://images.ctfassets.net/8j5aqoy0ts8s/1NSRf0tguIlItD453HrZ80/b825410327bd7b762f986079335083e9/Bannercode.png)
There are four font weights available in our system: regular, medium, semibold and bold. We selected these based on our fallback fonts to minimise the visual differences across operating systems.
![A visual of the four font weights, from right to left: Bold, Semibold, Medium and Regular.](http://images.ctfassets.net/8j5aqoy0ts8s/3KGW4SCGWTJ0w2Dojv5f0c/deab2c924628258b67f2ae4e671e7ce8/Bannerbold.png)
We recommend using the following default weights for our text styles:
Body in regular weight for paragraphs.
Body in medium weight for use in components and alongside icons.
Body in bold weight should be used in unique cases where text needs to be differentiated or given more emphasis. Use this weight sparingly.
Semibold weight is also available but use this weight with caution. Our fallback fonts don’t support this weight and will default to bold.
![An example of different font weights being used in production. The medium font weight is used for a title, whereas the regular font weight is used for placeholder text in a form.](http://images.ctfassets.net/8j5aqoy0ts8s/2nnJveisfxmaDuba1hEhiS/515258c09b4220e7f9215573d1a8aada/Bannerbold_2.png)
Use color.link
tokens for inline links and see link button for guidance on this button variant.
![](http://images.ctfassets.net/8j5aqoy0ts8s/1U1AZ5LKUKkHrCGaasbGQQ/9b71adad7a68a699065e1b26f8d1e70c/icon-button-do-1link_do.jpg)
Do
Use design tokens to follow inline link styling and provide visual clues to identify links in static text.
![](http://images.ctfassets.net/8j5aqoy0ts8s/4MnHGgHANBsNEMD2PNdKux/1a4058389c4ef23fe03d849e81d1091c/icon-button-dont-1link_don-t.jpg)
Don’t
Don’t show inline links in the same colour as surrounding text or ignore styling patterns for interactive text.
Never truncate text.
If you do use truncated text, for example if you are displaying user generated content of an unknown length, make sure that there's another option for people to expand and read the text.
![](http://images.ctfassets.net/8j5aqoy0ts8s/6InbzXMIVQgbS36niSrajD/e58882c0aba724913047236a35298e57/Imagetrunctation_do.jpg)
Do
Display content using the maximum character count allowed within components, especially if it is important information.
![](http://images.ctfassets.net/8j5aqoy0ts8s/318R4X9LqJJA9g0HceDJBl/354eca489dcc7c3a402ae5f2983612d2/Imagetruncation_don-t_.jpg)
Don’t
Don’t truncate content, if you must truncate make sure there is an option for people to expand and read the full text.
Wide lines of body text are difficult to read. Readers may choose a wide layout but it’s good practice to design for the ideal line length.
For the English language, optimal line length is between 60 and 80 characters per line including spacing, 
or approximately 10-12 words.
This can vary based on font, font size and how it will be displayed. For example, line lengths need to be shorter when reading text on smaller devices.
![The same piece of example text is displayed with three different line lengths. The first with 6-9 words per line is too short, the second with 10-12 words per line is optimal length, and the third with 18-20 words per line is too long.](http://images.ctfassets.net/8j5aqoy0ts8s/6aSwAS2mZ8THMZyHbXjS3K/fed22f056098e0f79fa1bfa03dea1510/Bannerline_length.png)
Creating hierarchy means using different font weights and sizes to let people easily see what content is the most important.
Our typography system allows visual hierarchy to be achieved in multiple ways. Using some or all of the below suggestions are ways to create extra levels of meaning and hierarchy to your work.
Use text styles and font weights to draw attention to titles and important content.
![An example of a project banner with a heading and body text, as well as larger, medium weight body text used in a drop down component.](http://images.ctfassets.net/8j5aqoy0ts8s/5ztFVPyAdPGzO0QHvfzd7b/e5b937d61116dfd04307c1d20f66372b/Bannervisual_hierarchy_1.png)
Use text size and color to differentiate between primary and secondary level content.
![An example of a list of projects with different font colours used. The project name uses the standard font color, while the project type listed below uses the subtle font colour to differentiate.](http://images.ctfassets.net/8j5aqoy0ts8s/6XxBpRKafABs4uP21xTK46/470ab392932316d3ebb45372d6fdeb3a/Bannervisual_hierarchy_2.png)
Read more about writing style and content guidelines in our content documentation.
The Atlassian Design System’s focus is product UI, however our service sites use a mixture of both marketing and product typography. The appropriate typography can be 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.
Visit Atlassian Brand documentation for more assets and guidance (authenticated users only).
For all new features, we recommend using Atlassian Design System and other Atlaskit components. For existing code, you can continue to use Atlassian User Interface (AUI).
Was this page helpful?
We use this feedback to improve our documentation.