Overview

Almost every screen of every product uses titles in some way. Titles help organize content and create a hierarchy. As a component, the title is a simple, large-sized text. The title component carries additional semantics that allows assistive technologies (e.g., screen readers) to sitemaps for faster navigation. Additionally, title hierarchies are essential for search engine optimization purposes.

Title Look and Feel

When To Use

false

Recommended

Use titles for page headers.
Use titles above components like tables, lists, and forms.
Use titles for each section or content group.

dont

false

Not recommended

Avoid using titles inside text blocks. Split the text blocks and title instead.
Avoid using titles to highlight parts of a text block. Use text styling instead.

Title Styles

The title component provides styling options based on the usage and level of the title.

<div> <div>Level</div> <div>Style</div> <div>Usage</div> </div> <div> <div>Level 1 (H1)</div> <div> <p>font-family: 72;</p> <p>font-size: 3rem;font-weight: black;</p> <p>line-height: 3.5rem;</p> </div> <div> <p>Hero Text. Use for the main headline on a product home.</p> <p>Use sparingly.</p> </div> </div> <div> <div>Level 2 (H2)</div> <div> <p>font-family: 72;</p> <p>font-size: 2rem;font-weight: black;</p> <p>line-height: 2.375rem;</p> </div> <div> <p>Web Page Title. Use for website pages. Use in featured cards.</p> <p>Use sparingly.</p> </div> </div> <div> <div>Level 3 (H3)</div> <div> <p>font-family: 72;</p> <p>font-size: 1.5rem;font-weight: black;</p> <p>line-height: 1.75rem;</p> </div> <div> <p>Page Titles. Use for tool UI page headers.</p> <p>Use in all pages and dynamic pages.</p> </div> </div> <div> <div>Level 4 (H4)</div> <div> <p>font-family: 72;</p> <p>font-size: 1.25rem;font-weight: bold;</p> <p>line-height: 1.5rem;</p> </div> <div> <p>Section Titles. Use to group or label and group information.</p> <p>Use in tables, sections, title bar, forms, etc.</p> </div> </div> <div> <div>Level 5 (H5)</div> <div> <p>font-family: 72;</p> <p>font-size: 1.125rem;font-weight: bold;</p> <p>line-height: 1.375rem;</p> </div> <div> <p>Dialog Titles. Use as headings for containers.</p> <p>Use in dialogs, popovers, cards, charts, etc.</p> </div> </div> <div> <div>Level 6 (H6)</div> <div> <p>font-family: 72;</p> <p>font-size: 0.875rem;font-weight: semibold;</p> <p>line-height: 1rem;</p> </div> <div> <p>Group Titles. Use to add additional grouping to an already titled content.</p> <p>Use in forms, lists, navigation, table, panels, cards, etc.</p> </div> </div>

Responsiveness

Reduction in Size

Reducing the font size on smaller screens helps tools better utilize space. Reducing the size will also result in less severe wrapping and later truncation.

Title Responsiveness

<div> <div>Level</div> <div>Style</div> <div>Usage</div> </div> <div> <div>Level 1 (H1)</div> <div> <p>font-family: 72;</p> <p>font-size: 2rem;font-weight: black;</p> <p>line-height: 2.5rem;</p> </div> <div> <p>Hero Text. Use for the main headline on a product home.</p> <p>Use sparingly.</p> </div> </div> <div> <div>Level 2 (H2)</div> <div> <p>font-family: 72;</p> <p>font-size: 1.5rem;font-weight: black;</p> <p>line-height: 1.75rem;</p> </div> <div> <p>Web Page Title. Use for website pages. Use in featured cards.</p> <p>Use sparingly.</p> </div> </div> <div> <div>Level 3 (H3)</div> <div> <p>font-family: 72;</p> <p>font-size: 1.25rem;font-weight: black;</p> <p>line-height: 1.75rem;</p> </div> <div> <p>Page Titles. Use for tool UI page headers.</p> <p>Use in all pages and dynamic pages.</p> </div> </div> <div> <div>Level 4 (H4)</div> <div> <p>font-family: 72;</p> <p>font-size: 1.125rem;font-weight: bold;</p> <p>line-height: 1.375rem;</p> </div> <div> <p>Section Titles. Use to group or label and group information.</p> <p>Use in tables, sections, title bar, forms, etc.</p> </div> </div> <div> <div>Level 5 (H5)</div> <div> <p>font-family: 72;</p> <p>font-size: 1rem;font-weight: bold;</p> <p>line-height: 1.125rem;</p> </div> <div> <p>Dialog Titles. Use as headings for containers.</p> <p>Use in dialogs, popovers, cards, charts, etc.</p> </div> </div> <div> <div>Level 6 (H6)</div> <div> <p>font-family: 72;</p> <p>font-size: 0.875rem;font-weight: bold;</p> <p>line-height: 1rem;</p> </div> <div> <p>Group Titles. Use to add additional grouping to an already titled content.</p> <p>Use in forms, lists, navigation, table, panels, cards, etc.</p> </div> </div>

false

Wrap Titles If:

Titles hold critical information.
Titles contain numbers.
Titles are placed in page headers.

false

Truncate Titles If:

Titles contain secondary information.
Titles exist inside Tool Header, Toolbar, Dialog, and Popovers.