Your bookmarks

Text

Renders text blocks in styles to fit the purpose.

Text can be a very effective way to communicate information. It’s even more effective when there’s not too much of it, it’s clearly structured, and users are clear what’s important and what isn’t.

Use text sparingly to add necessary information with a clear purpose.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a

Content structure

Size: distinguishes the importance of the text and is the primary way to create a hierarchy; type: distinguishes the purpose of the text and enables a hierarchy without sacrificing readability.

General guidelines

For guidelines on how to work with text styles in your designs, please check Typography page.