Your bookmarks

Heading

Also known as Title

Shows the content hierarchy and improves the reading experience.

Having a clear structure to your UI in general makes it easier for users to navigate each page. Headings help users process the structure and accomplish their goals.

Headings work best when they follow a clear hierarchy (not skipping any levels) and represent the real structure (aren’t just decorative or using size for emphasis).

Component status

Figma

Released

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Sketch

Released

Content structure

1st level heading: opens every page; 2nd level heading: opens sections with grouped content; 3rd level heading: following the content hierarchy when more structure is needed.

General guidelines

For guidelines on how to work with headings in your designs, check out Typography.