Text

See also the general guidelines in Typography.

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

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

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.

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

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.

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.

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.)