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.
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.
Don’t use color for emphasis.
The basic styling options for text are the three possible sizes
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:
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.)