Text
Renders text blocks in styles to fit the purpose.
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.
 |  |  |  |  |
|---|---|---|---|---|
Released | Released | n/a | n/a | Released |
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 the 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.)