# Text

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

CSS 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.

The classes on this page cover the most common needs: picking a size and weight for body copy, styling headings, aligning paragraphs, truncating overflow, and changing font color. Every class is built on your theme's typography tokens, so switching themes or tweaking your type scale updates the whole site at once.

## Body

Link to This Section

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

Link to This Section

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

Link to This Section

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

Link to This Section

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

Link to This Section

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

Link to This Section

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

Link to This Section

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

Link to This Section

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

Link to This Section

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

Link to This Section

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\` |

## Wrapping

Link to This Section

Use these classes to control how text wraps across lines. They apply standard CSS [`text-wrap`](https://developer.mozilla.org/docs/Web/CSS/text-wrap) values.

| Class Name |
| --- |
| \`wa-text-nowrap\` |
| \`wa-text-balance\` |
| \`wa-text-pretty\` |

`wa-text-pretty` is wrapped in an `@supports` rule because Firefox does not yet support `text-wrap: pretty`. In unsupported browsers, the class has no effect and text wraps normally.

The original `wa-text-wrap-nowrap`, `wa-text-wrap-balance`, and `wa-text-wrap-pretty` class names continue to work as aliases for backwards compatibility. These older names are deprecated and will be removed in a future major version — we recommend updating to the shorter `wa-text-*` names above.

## Transform

Link to This Section

Use these classes to change the case of text. They apply standard CSS [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) values.

| Class Name |
| --- |
| \`wa-text-uppercase\` |
| \`wa-text-lowercase\` |
| \`wa-text-capitalize\` |

Large blocks of uppercase text are [harder for everyone to read](https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html) and especially difficult for folks with dyslexia. Reserve it for buttons, badges, or short headings.

## Alignment

Link to This Section

Use these classes to align text within its container. They apply standard CSS [`text-align`](https://developer.mozilla.org/docs/Web/CSS/text-align) values using logical properties, so they adapt automatically to the document's writing direction.

| Class Name |
| --- |
| \`wa-text-start\` |
| \`wa-text-center\` |
| \`wa-text-end\` |
| \`wa-text-justify\` |

Justified text can create uneven word spacing that's [harder for everyone to read](https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html) and especially difficult for folks with dyslexia. Reserve it for short, narrow text columns.

## Truncation

Link to This Section

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

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