Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

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.
Edit this page in GitHub (Permissions required)
Last updated: May 07, 2025