# Typography

Helpers are one optional consumer of the [typography tokens](https://storybook-tangible-ui.pages.dev/docs/tokens-typography.md) — prefer `font-size: var(--tui-typography-size-sm)` directly in your own CSS when you control it; the classes exist for markup-only contexts. See the [Utility Class Index](https://storybook-tangible-ui.pages.dev/docs/reference-utility-classes.md) and [Primitive Token Index](https://storybook-tangible-ui.pages.dev/docs/reference-primitive-tokens.md).

## Font size

| Class | Computed Size | Preview |
| - | - | - |
| `.tui-text-xs` | 12px | This is extra-small text. |
| `.tui-text-sm` | 14px | This is small text. |
| `.tui-text-md` | 16px | This is medium text. |
| `.tui-text-lg` | 20px | This is large text. |
| `.tui-text-xl` | 24px | This is extra-large text. |
| `.tui-text-xxl` | 32px | This is extra-extra-large text. |

## Font weight

| Class | Computed value | Preview |
| - | - | - |
| `.tui-text-normal` | `normal` | This is text with normal weight. |
| `.tui-text-bold` | `bold` | This is text with bold weight. |

## Color

| Class | Preview |
| - | - |
| `.tui-text-primary` | This is text with primary theme. |
| `.tui-text-secondary` | This is text with secondary theme. |
| `.tui-text-info` | This is text with info theme. |
| `.tui-text-warning` | This is text with warning theme. |
| `.tui-text-danger` | This is text with danger theme. |
| `.tui-text-success` | This is text with success theme. |
| `.tui-text-contrast-low` | This is text with low contrast. |
| `.tui-text-contrast-high` | This is text with high contrast. |
| `.tui-text-white` | This is white text. |

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/system-typography-helpers--docs