Typography CSS classes
Type scale
The type scale is a modular scale of font sizes stored in CSS variables:
:root {
// body font size
--text-base-size: 1em;
}Typography
Typography utility classes.
Font size
| Class | Description |
|---|---|
.text-xs | font-size: var(–text-xs); |
.text-sm | font-size: var(–text-sm); |
.text-base | font-size: 1em; |
.text-md | font-size: var(–text-md); |
.text-lg | font-size: var(–text-lg); |
.text-xl | font-size: var(–text-xl); |
.text-xxl | font-size: var(–text-xxl); |
.text-xxxl | font-size: var(–text-xxxl); |
.text-xxxxl | font-size: var(–text-xxxxl); |
Edit the font-size classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).
Example:
<p class="text-lg text-xl@lg"><!-- content --></p>⚠️ The font-size responsive modifiers work only in modern browsers.
Font weight
| Class | Description |
|---|---|
.font-light | font-weight: 300; |
.font-normal | font-weight: 400; |
.font-medium | font-weight: 500; |
.font-semibold | font-weight: 600; |
.font-bold | font-weight: 700; |
Font style
| Class | Description |
|---|---|
.font-italic | font-style: italic; |
Text align
| Class | Description |
|---|---|
.text-center | text-align: center; |
.text-left | text-align: left; |
.text-right | text-align: right; |
.text-justify | text-align: justify; |
Edit the text alignment classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).
<p class="text-center text-left@md text-right@lg">👀 Hey look my alignment changes!</p>Was this article helpful?
YesNo