Anatomy
'%20fill='%23843CC7'/%3e%3crect%20x='112'%20y='106'%20width='24'%20height='24'%20rx='12'%20fill='%234B00E2'/%3e%3cpath%20d='M125.534%20113.318V123.5H123.993V114.859H123.933L121.497%20116.45V114.979L124.037%20113.318H125.534Z'%20fill='white'/%3e%3c/svg%3e)
| # | Required | Element | Description |
|---|---|---|---|
| 1 | Text container | Inline element that renders text with the selected typography styles. |
Guidelines
When to use
Text serves as the foundational typography component in Pluma. Other components, such as Heading, Paragraph, and TextLabel, are built on top of Text and inherit its styling props. Consider the following use cases of other semantic components before reaching for Text:
- Code: For monospace text to display code snippets.
- Emphasis: For text that has stressed emphasis, equivalent to
<em>. - Heading: For heading elements equivalent to
<h1>through<h6>to provide proper document structure. - Paragraph: For paragraph text using
<p>. - Strong: For strong visual emphasis, equivalent to
<strong>. - TextLabel: For form control labels and metadata, equivalent to
<label>.
If none of the above apply, fall back to using the Text component.
Best practices
Color use
When manually changing Text colors, be sure they adhere to semantic meaning and use. Avoid selecting colors to follow a theme.
For more information regarding color and accessibility, see Color and meaning.
Hierarchy
When used in harmony, font size and weight provide a clear visual hierarchy to communicate importance on the page. If not using the preset typography options, consider pairing smaller font sizes with subtler colors for secondary information or subtitles. Avoid using similar sizes and weights for headings and content at different levels of importance as it may confuse users.
Appearance
Color
Text uses the base text color by default. When placed inside a container with an inverted or bold background, the color automatically adapts for contrast. Available colors map to Pluma's semantic tokens.
Pluma colors convey semantic meaning.
Colors automatically adjusts for contrast when placed on an inverted background.
Font family
A system sans-serif font is used for most body text by default. Use monospace for code snippets, technical values, and developer-specific variables.
Sans-serif is the default for general-purpose text.
Monospace is used for code, IDs, or other technical values.
Font style
Font style determines whether the text should be normal or italic. Normal is default. Italic allows for visual emphasis without adhering to the semantic HTML tag. If semantic meaning is required with italic styling, use the Emphasis component instead.
Normal is the default style.
Italic is used sparingly for visual emphasis.
Size
Text supports a range of font sizes from xxs to xxxl. Choose a size that creates clear hierarchy relative to surrounding content. The most common sizes used are s and xs.
Available sizes range from `xxs` to `xxxl`.
Text styles
Predefined text styles bundle font size, font weight, line height, and letter spacing into a single token. These correspond to the product typography scale and override individual size and weight settings.
For more information on what text styles are available, see the Text section within the Typography tokens page.
Predefined typography styles apply a consistent set of properties in one step.
Weight
Font weight controls the visual prominence of text. Use heavier weights to draw attention to key information and lighter weights for supporting content.
For any cases where bold, visual emphasis is equally as important as semantic meaning, prefer to use the Strong component.
Light weight provides minimal visual emphasis.
Regular is the default weight for body text.
Medium provides moderate emphasis, commonly used for inline labels.
Semibold provides strong emphasis for primary values and key information.
Bold provides strong emphasis for prominent content.
Heavy provides the strongest visual emphasis. Use sparingly for maximum contrast.
Behaviors
Text wrapping
Text wraps naturally within its container. The wrapping algorithm used specifically avoids widows, lone single words on the last line.
Truncation
When text overflows its container, enable truncation to clip the content with an ellipsis. Pair truncation with a Tooltip so the full content remains accessible.
By default, text wraps to the next line.
Long text is clipped with an ellipsis when truncation is enabled.
Content
In most cases, content writing using the Text component should follow the guidelines within the Pluma Foundations Content section. For more specific component cases, refer to those individual components' content sections within their design guidelines page.