Text

Renders text blocks in styles to fit the purpose.

See also the general guidelines in Typography.

When to use

  • To communicate information.
  • To control the visual styling of text.
  • Only sparingly to add necessary information with a clear purpose.

When not to use

  • To add structure and divide screens into sections—use a heading.

Component status

Figma

React

iOS

Android

Released
Released
N/A
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.

Look & feel

Base everything off normal primary

Start with normal-sized, primary, unweighted text. Then add importance first with size and then weight. Show less important things first with smaller text and then with secondary color.

Keep all text in a block one color

Inside a paragraph, all the text should be the same color. To emphasize something, use a stronger weight.

Do

Use weight for emphasis.

A sentence with two words in bold indicating emphasis.

Don't

Don’t use color for emphasis.

A sentence with words in green and red to indicate emphasis.

Text size

The basic styling options for text are the three possible sizes (fontSizeTextSmall, fontSizeTextNormal, and fontSizeTextLarge). These sizes should give you a clear hierarchy for all your text.

Using only these sizes should be enough for the basics. When you have a hierarchy set, you can use color and weight to emphasize certain parts and de-emphasize others.

Text color

There are two main colors to work with: primary (colorTextPrimary) and secondary (colorTextSecondary).

Start with primary text as your baseline. Then if you need to de-emphasize some text (which is a good way of emphasizing other text), use secondary text to show that it’s not as important.

We also have supplementary colors for when you need to match text to a specific status (as in alerts) or when you’re writing on a dark background.

Text weight

When size and color aren’t enough or when you need to emphasize text inside a larger paragraph, you can use weight to add emphasis.

There are only two possible weights for text: normal and bold. In combination with size and color, this should be enough for all your needs. (See Figma-specific guidelines for more on weights there.)