---
title: "Text Intent - Typography Utilities"
description:
  "Typography with @text intent. Font size, weight, color, alignment, and text
  utilities."
keywords:
  ["@text", "typography", "font", "text color", "text alignment", "font size"]
---

# Text Intent Overview

Text intent contains **element's typography** related utilities.

Utilities available in `@text` intent are listed below.

| Utility      | Description                                                       | Documentation                              |
| ------------ | ----------------------------------------------------------------- | ------------------------------------------ |
| `align-*`    | Align text content within element along main-axis and cross-axis. | [align](/docs/properties/text/align)       |
| `break-*`    | Control text breaking and word wrapping.                          | [break](/docs/properties/text/break)       |
| `case-*`     | Transform text case to upper, lower, or capitalize.               | [case](/docs/properties/text/case)         |
| `color-*`    | Set text color for elements.                                      | [color](/docs/properties/text/color)       |
| `content-*`  | Set text content for pseudo-elements (`::before` and `::after`).  | [content](/docs/properties/text/content)   |
| `family-*`   | Set font family for text elements.                                | [family](/docs/properties/text/family)     |
| `gap-*`      | Control spacing between letters and words.                        | [gap](/docs/properties/text/gap)           |
| `h-*`        | Set line height.                                                  | [h](/docs/properties/text/h)               |
| `line-*`     | Control text decoration (line).                                   | [line](/docs/properties/text/line)         |
| `lines-*`    | Control number of visible text lines (clamping).                  | [lines](/docs/properties/text/lines)       |
| `move-*`     | Set empty space (indentation) before text block (lines).          | [move](/docs/properties/text/move)         |
| `nums-*`     | Set numeric glyph styling (tabular, lining, etc.)                 | [nums](/docs/properties/text/nums)         |
| `overflow-*` | Handle overflowing text.                                          | [overflow](/docs/properties/text/overflow) |
| `shadow-*`   | Add text shadow effects.                                          | [shadow](/docs/properties/text/shadow)     |
| `size-*`     | Set text size for text elements.                                  | [size](/docs/properties/text/size)         |
| `space-*`    | Control white space in text.                                      | [space](/docs/properties/text/space)       |
| `style-*`    | Set text style for text elements.                                 | [style](/docs/properties/text/style)       |
| `thick-*`    | Set text's thickness (weight).                                    | [thick](/docs/properties/text/thick)       |