Guidelines
Guidelines
Usage
The Text should:
- Be used for any kind of non-structural text content such as e.g. body text, paragraphs, blockquotes, links, labels, or captions
- Be set to span 50-90 characters per line for optimal readability.
- Have its viewport value be set to reflect the breakpoint, or device, the interface is designed for.
- Be used for titles in components when the Title scale is too large.
- Use the contrasting appearance to its context: 'light' on dark surfaces, and 'dark' on light surfaces.
Kind
The Text should:
- Use kind to enhance a hierarchy for the content together with size and weight.
- Use 'normal' kind as a default for all text.
- Use 'subtle' kind for information that's secondary.
Size and Weight
The Text should:
- Use 'medium' or 'small' size for the default body text size for optimal readability.
- Use size and weight to create a hierarchy for the content for content clarity.
- Use the same size and weight for similar level and type content and component.
- Be set to have the same size across viewport sizes.
Spacing
The spacing should:
- Be set to 'none' when building interface components. Spacing Text inside components should use the Spacing scale.
- Be set to 'long-form' when laying out long-form content.
- Be set to 'long-form-top' when the long-form content starts below the non-text component to apply the correct spacing above the text.
- Be set to 'long-form-bottom' when the long-form content ends above the non-text component to apply the correct spacing above the text.
Accessibility
The Text should:
- Be used on predefined surface colors when its role is defined to be as body text.
- Have its contrast ratio reviewed when placed on images or on colors that are not part of the Cosmos 'surface' palette.