## Examples

### Font family


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Font size


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Font weight


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Standard text colors


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Inverse colors

These colors are best used with the ["inverse" background colors](/utility-classes/background-color#inverse-background-colors).


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Link colors


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Status and state text colors


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Disabled text colors


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Icon colors


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Controlling text


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

## Documentation

### Overview

These text utilities can be used to modify text within the PatternFly framework. In most cases, using the components with available modifiers should be sufficient to implement most designs, and should be preferred over customizations using these utilities.

Care should be taken especially when applying text colors, as this can have a negative effect on the readability and accessibility of text. Refer to the information on [contrast ratios](/guidelines/colors/#contrast-ratios) for more information.

[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-font-size-xl-on-lg`

### Usage

| Class | Applied to | Outcome |
| - | - | - |
| `.pf-v6-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`| `*` | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
| `.pf-v6-u-font-family-{text, heading, monospace}` | `*` | Sets font-family to text, heading, or monospace |
| `.pf-v6-u-font-weight-{normal, bold}{-on-[breakpoint]}` | `*` | Sets font-weight to light, normal, or bold |
| `.pf-v6-u-text-color-{regular, brand, placeholder, requried, subtle}{-on-[breakpoint]}` | `*` | Sets font-color |
| `.pf-v6-u-text-color-link{-on-[breakpoint]}` | `*` | Sets font-color to link color |
| `.pf-v6-u-text-color-link-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
| `.pf-v6-u-text-color-link-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
| `.pf-v6-u-text-color-status-{success, warning, danger, info, custom}{-on-[breakpoint]}` | `*` | Sets font-color to status color |
| `.pf-v6-u-text-color-disabled{-on-[breakpoint]}` | `*` | Sets font-color to disabled text color |
| `.pf-v6-u-text-color-on-disabled{-on-[breakpoint]}` | `*` | Sets font-color to text color on disabled background |
| `.pf-v6-u-icon-color-{regular, brand, placeholder, requried, subtle}{-on-[breakpoint]}` | `*` | Sets font-color for icons |
| `.pf-v6-u-icon-color-status-{success, warning, danger, info, custom}{-on-[breakpoint]}` | `*` | Sets font-color to icon status color |
| `.pf-v6-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
| `.pf-v6-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
| `.pf-v6-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
| `.pf-v6-u-text-truncate` | `*` | Truncates text field |