Typography Utilities
Table of contents
Font size
Use the .text-xs - .text-9xl to set an explicit font-size.
| Class | font-size |
|---|---|
.text-xs |
12px |
.text-sm |
14px |
.text-base |
16px |
.text-lg |
18px |
.text-xl |
20px |
.text-2xl |
24px |
.text-3xl |
30px |
.text-4xl |
36px |
.text-5xl |
48px |
.text-6xl |
60px |
.text-7xl |
72px |
.text-8xl |
96px |
.text-9xl |
128px |
Extra small text
Small text
Base text
Large text
Extra large text
2x large text
3x large text
4x large text
5x large text
6x large text
7x large text
8x large text
9x large text
In Markdown, use the `{: }` wrapper to apply custom classes:
Extra small text
{: .text-xs }
Small text
{: .text-sm }
Base text
{: .text-base }
Large text
{: .text-lg }
Extra large text
{: .text-xl }
2x large text
{: .text-2xl }
3x large text
{: .text-3xl }
4x large text
{: .text-4xl }
5x large text
{: .text-5xl }
6x large text
{: .text-6xl }
7x large text
{: .text-7xl }
8x large text
{: .text-8xl }
9x large text
{: .text-9xl }
Font weight
Font light
Font normal
Font medium
Font bold
In Markdown, use the `{: }` wrapper to apply custom classes:
Font light
{: .font-light }
Font normal
{: .font-normal }
Font medium
{: .font-medium }
Font bold
{: .font-bold }
Line height
Use the lh- classes to explicitly apply line height to text.
| Class | line-height value |
Notes |
|---|---|---|
.leading-none |
1 | |
.leading-<number> |
calc(var(–spacing) * |
Leading None
Leading With Number 1
Leading With Number 2
Leading With Number 3
In Markdown, use the `{: }` wrapper to apply custom classes:
Leading None
{: .leading-none }
Leading With Number 1
{: .leading-1 }
Leading With Number 2
{: .leading-2 }
Leading With Number 3
{: .leading-3 }
Text justification
By default text is justified left. Use these text- classes to override settings:
| Class | What it does |
|---|---|
.text-left |
text-align: left |
.text-right |
text-align: right |
.text-center |
text-align: center |
.text-justify |
text-align: justify |
.text-start |
text-align: start |
.text-end |
text-align: end |