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.
Do
Use weight for emphasis.
Don't
Don’t use color for emphasis.
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.)