Components
Text
Use: Best practice
Text is a mobile app typography component for headings, body copy, and display text.
Examples
Body
View va-mobile_text–body in Storybook
Display
View va-mobile_text–display in Storybook
Heading
View va-mobile_text–heading in Storybook
Usage
When to use Text
- To add content to a mobile application screen.
When to consider something else
- Bulleted or numbered lists. Use the Text list component (coming soon).
- Smaller Navigation copy. Apply the Navigation text style directly to a text box, such as the bottom tab bar.
How this component works
- Use composite typography tokens. This component is built using the composite typography tokens. Designers and engineers are encouraged to use typography tokens to ensure a consistent look and feel throughout the app. Multiple typography tokens are combined to create composite tokens (aka text styles).
- Minimum paragraph spacing meets WCAG guidelines. Paragraph spacing is set to the minimum recommended values to align with accessibility guidelines (WCAG SC 1.4.12). While you can increase the amount of paragraph spacing, you should not decrease without consulting an accessibility specialist.
Behavior
Choosing between web variations
There are 9 variations of the Text component.
- Use a Heading variation (large, medium, small, x-small) for headings.
- Use a Body variation (large, medium, small, x-small) for body copy.
- Use the Display variation for larger display text.