- When you need to use a semantic H1–H6 heading to create a clear typographic hierarchy and page structure
- To emphasize text. Use Text with a bold or italic style instead
- To provide an overall Page title. Use PageHeader instead
Use to help group text and items into sections in a logical order.
Use to emphasize text that you want users to read. Use a message component like SlimBanner, or bold text. You can also emphasize numbers by using text sizes.
Keep headings short and glanceable.
Use overly long headings. If headings are dynamically generated (like a 3rd party app name), lineClamp will work after 2 lines, but be mindful of unintended changes in meaning.
Clearly describe the section a Heading refers to.
Use vague language that doesn’t describe the section that a Heading refers to.
Start-align headings to make it faster for users to read text from the point where they naturally start reading. The exceptions are headings related to integers in Table.
Center-align headings as it can make it harder for users with dyslexia who need a consistent stating edge. Paired with left-aligned paragraph text, it can make the typographic structure feel off-center and unbalanced.
Users will find a logical heading order and structure very helpful, especially if they have difficulty with reading and language, or if they use assistive devices such as a screen reader. A clear structure will help a screen reader user navigate the app without getting confused. Our headings default to a heading level based on size. For example:
In some cases, you may need to start a section with a smaller heading size, but keep an H2 structure. An example is a section heading for a card or sidebar. Use the
accessibilityLevel prop to override the default heading level and set the appropriate level.
A minimum text size of 16 px (12pt) is recommended for readability. Headings can go lower than that, but smaller sizes should be kept to a minimum. Making text brief will also help with readability.
For low-vision users, text color contrast is very important. To insure accessible contrast, stick to our standard text colors. See our accessibility page for design considerations and handy accessibility tools for checking color contrast.
Keep text simple and short to avoid truncation or line wrapping in UI controls like buttons when translating languages that require more characters. Avoid overriding our line-height settings, as this can result in text clipping for scripts, like Hindi, that have taller ascenders and descenders.
These font sizes follow those available through our Design Tokens. If your text does not need to be a semantic heading (H1-H6), use Text instead.
Overflow & truncation
align to adjust the positioning of text within container elements
For accessibility purposes, we allow you to override the heading level.
For certain specific situations, it is possible to use Heading without an accessibility level; however, we recommend against using this if possible.
Component quality checklist
Component is available in Figma across all platforms.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.
- Keep headings short and clear
- Use Sentence case for headings per our Pinterest writing standards to keep the tone conversational and make headings easier to scan
- Punctuate headings unless they are posing a question or making an exclamation
- Use Title Case or ALL CAPS
A run-down on our typographic foundations, with some guidelines for using Heading and Text components together in products.