---
title: Text
description: Use the text component create a range of body text
keywords: ['body', 'content', 'copy', 'paragraph']
---

![The text component has size ranges from 100 to 700 with 100 being the smallest, and 700 being the largest.](https://github.com/primer/brand/assets/912236/67d89861-7a1e-4df9-a801-01d11f4dfb17)

## Usage

Use the text component to provide content and a clear hierarchy structure. The text component renders an HTML `<span>` tag without any default styling. Use `<p>` for any text that is meant to be a paragraph of text. Use multiple text components to represent paragraphs as distinct blocks of text. This helps with readability and makes it easier for search engines and assistive technologies to understand the content.

## Options

### Variant

The text component provides two variant options: `default` and `muted`. The `muted` variant is used to de-emphasize text or to provide visual contrast when paired with a title.

**✅ Do**

![](https://github.com/primer/brand/assets/912236/b7fa8c0d-0877-4edd-a8b3-4eea2e16fe26)

_Use muted text to de-emphasize text and provide additional context._

**❌ Don't**

![](https://github.com/primer/brand/assets/912236/01f1e3a8-5058-4a73-a69f-6f424382fb63)

_Don't use standalone muted text. Muted text should always be paired with emphasized text or a title._

### Size

The text size ranges from 100 to 700, with 400 as the default size. This scale is built to provide hierarchy for all types of scenarios.

**✅ Do**

![](https://github.com/primer/brand/assets/912236/e029b053-eab8-47a7-bd49-b6ce49ac8bdf)

_Use a smaller size to provide visual hierarchy when the text is paired with a title. Use as many text components
as needed to represent different blocks of content._

**❌ Don't**

![](https://github.com/primer/brand/assets/912236/bfc9aaba-5a48-4053-a4a0-2209a9d7f082)

_When the text is paired with a title, use a smaller size to provide visual hierarchy._

### Alignment

Text alignment options offer a convenient way to control the positioning of content within block level elements.

Available options include `start`, `center`, and `end`, which are recommended for supporting bidirectional reading.

### Weight

The text component also supports `weight` options. Weight is automatically determined by the text size, but can be overridden when the scenario calls for it.

### Responsive

The text component is responsive by default and the size will scale down on smaller screens. Weight options will remain the same across all screen sizes but can be overridden for each breakpoint.

_Video demonstration — see the online docs._

## Related components

- [Heading](../Heading/index.md): to render headings.
- [Ordered list](../../components/OrderedList/index.md): to render ordered lists.
- [Unordered list](../../components/UnorderedList/index.md): to render unordered lists.
