Typography Utilities
On this page
# Font Family
The font family utility controls the font of an element.
Most of the typography utilities, besides
text-color and text-transform, have responsive variants for each breakpoint. Use --xs-{utility}, --sm-{utility}, --md-{utility}, --lg-{utility}, --xl-{utility}. | Class | Properties |
|---|---|
| --family-sans | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
| --family-serif | font-family: Georgia, Cambria, "Times New Roman", Times, serif; |
| --family-mono | font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
# Font Size
The font size utility controls the font size of an element.
| Class | Properties |
|---|---|
| --size-base | font-size: 1rem; |
| --size-xs | font-size: .75rem; |
| --size-sm | font-size: .875rem; |
| --size-lg | font-size: 1.125rem; |
| --size-xl | font-size: 1.25rem; |
| --size-2xl | font-size: 1.5rem; |
| --size-3xl | font-size: 1.875rem; |
| --size-4xl | font-size: 2.25rem; |
| --size-5xl | font-size: 3rem; |
| --size-6xl | font-size: 4rem; |
# Font Weight
The font weight utility controls the font weight of an element.
| Class | Properties |
|---|---|
| --weight-hairline | font-weight: 100; |
| --weight-thin | font-weight: 200; |
| --weight-light | font-weight: 300; |
| --weight-normal | font-weight: 400; |
| --weight-medium | font-weight: 500; |
| --weight-semibold | font-weight: 600; |
| --weight-bold | font-weight: 700; |
| --weight-extrabold | font-weight: 800; |
| --weight-black | font-weight: 900; |
# Letter Spacing
The font weight utility controls the font weight of an element.
| Class | Properties |
|---|---|
| --spacing-tighter | letter-spacing: -0.05em; |
| --spacing-tight | letter-spacing: -0.025em; |
| --spacing-normal | letter-spacing: 0; |
| --spacing-wide | letter-spacing: 0.025em; |
| --spacing-wider | letter-spacing: 0.05em; |
| --spacing-widest | letter-spacing: 0.1em; |
# Line Height
The line height utility controls the line height of an element.
| Class | Properties |
|---|---|
| --line-none | line-height: 1; |
| --line-tight | line-height: 1.25; |
| --line-snug | line-height: 1.375; |
| --line-normal | line-height: 1.5; |
| --line-relaxed | line-height: 1.625; |
| --line-loose | line-height: 2; |
# Text Align
The text align utility controls the text align of an element.
| Class | Properties |
|---|---|
| --align-left | text-align: left; |
| --align-center | text-align: center; |
| --align-right | text-align: right; |
| --align-justify | text-align: justify; |
# Text Color
The text color utility controls the text color of an element and contains classes for each color variable along with primary, success, warning, danger, dark, and light. This utility also includes classes for focus and hover states. See colors.
| Class | State | Properties |
|---|---|---|
| --color-blue | color: @color[blue]; | |
| --color-primary | color: @color[blue]; | |
| --focus-color-primary | :focus | color: @color[blue]; |
| --hover-color-primary | :hover | color: @color[blue]; |
# Text Transform
The text transform utility controls the text transform of an element.
| Class | Properties |
|---|---|
| --uppercase | text-transform: uppercase; |
| --lowercase | text-transform: lowercase; |
| --capitalize | text-transform: capitalize; |
| --normal-case | text-transform: none; |
| --truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
# Vertical Align
The vertical align utility controls the vertical align of an element.
| Class | Properties |
|---|---|
| --vertical-baseline | vertical-align: baseline; |
| --vertical-top | vertical-align: top; |
| --vertical-middle | vertical-align: middle; |
| --vertical-bottom | vertical-align: bottom; |
| --vertical-text-top | vertical-align: text-top; |
| --vertical-text-bottom | vertical-align: text-bottom; |