# Text

**Full documentation:** https://webawesome.com/docs/utilities/text

Text utility classes use custom properties from your Web Awesome theme and other standard CSS properties to style text elements on the fly.

## Body

Use `wa-body-*` classes to style the main content of your pages. Each class specifies a `font-size` that corresponds to a [font size token](https://webawesome.com/docs/tokens/typography/#font-size) from your theme.

`3xs` and `2xs` fall below typical legibility. It's best to keep their use to non-essential UI only (e.g. labels, metadata) to maintain accessibility.

Alternatively, use `wa-body` to apply the same styling without an explicit font size.

| Class Name |
| --- |
| \`wa-body-3xs\` |
| \`wa-body-2xs\` |
| \`wa-body-xs\` |
| \`wa-body-s\` |
| \`wa-body-m\` |
| \`wa-body-l\` |
| \`wa-body-xl\` |
| \`wa-body-2xl\` |
| \`wa-body-3xl\` |
| \`wa-body-4xl\` |
| \`wa-body-5xl\` |

## Headings

Use `wa-heading-*` classes to style section titles and headings in your content. Each class specifies a `font-size` that corresponds to a [font size token](https://webawesome.com/docs/tokens/typography/#font-size) from your theme.

Alternatively, use `wa-heading` to apply the same styling without an explicit font size.

| Class Name |
| --- |
| \`wa-heading-3xs\` |
| \`wa-heading-2xs\` |
| \`wa-heading-xs\` |
| \`wa-heading-s\` |
| \`wa-heading-m\` |
| \`wa-heading-l\` |
| \`wa-heading-xl\` |
| \`wa-heading-2xl\` |
| \`wa-heading-3xl\` |
| \`wa-heading-4xl\` |
| \`wa-heading-5xl\` |

## Captions

Use `wa-caption-*` classes to style descriptions or auxiliary text in your content. Each class specifies a `font-size` that corresponds to a [font size token](https://webawesome.com/docs/tokens/typography/#font-size) from your theme.

Alternatively, use `wa-caption` to apply the same styling without an explicit font size.

| Class Name |
| --- |
| \`wa-caption-3xs\` |
| \`wa-caption-2xs\` |
| \`wa-caption-xs\` |
| \`wa-caption-s\` |
| \`wa-caption-m\` |
| \`wa-caption-l\` |
| \`wa-caption-xl\` |
| \`wa-caption-2xl\` |
| \`wa-caption-3xl\` |
| \`wa-caption-4xl\` |
| \`wa-caption-5xl\` |

## Longform

Use `wa-longform-*` classes to style lengthy content like essays or blog posts. Each class specifies a `font-size` that corresponds to a [font size token](https://webawesome.com/docs/tokens/typography/#font-size) from your theme.

Alternatively, use `wa-longform` to apply the same styling without an explicit font size.

| Class Name |
| --- |
| \`wa-longform-3xs\` |
| \`wa-longform-2xs\` |
| \`wa-longform-xs\` |
| \`wa-longform-s\` |
| \`wa-longform-m\` |
| \`wa-longform-l\` |
| \`wa-longform-xl\` |
| \`wa-longform-2xl\` |
| \`wa-longform-3xl\` |
| \`wa-longform-4xl\` |
| \`wa-longform-5xl\` |

## Links

Use `wa-link` to give interactive text a link-like appearance. Alternatively, use `wa-link-plain` to remove typical link styles from `<a>` elements.

| Class Name |
| --- |
| \`wa-link\` |
| \`wa-link-plain\` |

## Lists

Ordered (`<ol>`) and unordered (`<ul>`) lists are given default styles by either Web Awesome's [native styles](https://webawesome.com/docs/utilities/native/) or your browser. Use `wa-list-plain` to clear any built-in list styles.

| Class Name |
| --- |
| \`wa-list-plain\` |

## Form Controls

Use `wa-form-control-*` classes to style labels, values, placeholders, and hints outside of typical form control contexts with [form control tokens](https://webawesome.com/docs/tokens/component-groups/#form-controls) from your theme.

| Class Name |
| --- |
| \`wa-form-control-label\` |
| \`wa-form-control-value\` |
| \`wa-form-control-placeholder\` |
| \`wa-form-control-hint\` |

## Font Size

Use single-purpose `wa-font-size-*` classes to apply a given [font size](https://webawesome.com/docs/tokens/typography/#font-size) from your theme to any element without additional styling.

| Class Name |
| --- |
| \`wa-font-size-3xs\` |
| \`wa-font-size-2xs\` |
| \`wa-font-size-xs\` |
| \`wa-font-size-s\` |
| \`wa-font-size-m\` |
| \`wa-font-size-l\` |
| \`wa-font-size-xl\` |
| \`wa-font-size-2xl\` |
| \`wa-font-size-3xl\` |
| \`wa-font-size-4xl\` |
| \`wa-font-size-5xl\` |

## Font Weight

Use single-purpose `wa-font-weight-*` classes to apply a given [font weight](https://webawesome.com/docs/tokens/typography/#font-weight) from your theme to any element without additional styling.

| Class Name |
| --- |
| \`wa-font-weight-light\` |
| \`wa-font-weight-normal\` |
| \`wa-font-weight-semibold\` |
| \`wa-font-weight-bold\` |

## Text Color

Use single-purpose `wa-color-text-*` classes to apply a given [text color](https://webawesome.com/docs/tokens/color/#text) from your theme to any element without additional styling.

| Class Name |
| --- |
| \`wa-color-text-quiet\` |
| \`wa-color-text-normal\` |
| \`wa-color-text-link\` |

## Truncation

Use the `wa-text-truncate` class to truncate text with an ellipsis instead of letting it overflow or wrap.

| Class Name |
| --- |
| \`wa-text-truncate\` |