Size and Weight
Utility classes for styling type.
Font sizes
| Class | Property: Value |
|---|---|
| .text-xs | font-size: 0.75rem; |
| .text-sm | font-size: 0.875rem; |
| .text-base | font-size: 1rem; |
| .text-lg | font-size: 1.25rem; |
| .text-xl | font-size: 1.375rem; |
| .text-2xl | font-size: 1.875rem; |
| .text-3xl | font-size: 2.25rem; |
| .text-4xl | font-size: 2.625rem; |
| .text-5xl | font-size: 3.00rem; |
| .text-6xl | font-size: 3.75rem; |
| .text-7xl | font-size: 4.5rem; |
| .text-8xl | font-size: 5.5rem; |
| .text-9xl | font-size: 6.5rem; |
Font size sample
.text-xs
The quick brown fox jumped over the lazy dog.
.text-sm
The quick brown fox jumped over the lazy dog.
.text-base
The quick brown fox jumped over the lazy dog.
.text-lg
The quick brown fox jumped over the lazy dog.
.text-xl
The quick brown fox jumped over the lazy dog.
.text-2xl
The quick brown fox jumped over the lazy dog.
.text-3xl
The quick brown fox jumped over the lazy dog.
.text-4xl
The quick brown fox jumped over the lazy dog.
.text-5xl
The quick brown fox jumped over the lazy dog.
.text-6xl
The quick brown fox jumped over the lazy dog.
.text-7xl
The quick brown fox jumped over the lazy dog.
.text-8xl
The quick brown fox jumped over the lazy dog.
.text-9xl
The quick brown fox jumped over the lazy dog.
Font weights
| Class | Property: Value |
|---|---|
| .font-light | font-weight: 300; |
| .font-normal | font-weight: 400; |
| .font-semibold | font-weight: 600; |
| .font-bold | font-weight: 700; |
| .font-black | font-weight: 900; |
Font weight sample
.font-light
The quick brown fox jumped over the lazy dog.
.font-normal
The quick brown fox jumped over the lazy dog.
.font-semibold
The quick brown fox jumped over the lazy dog.
.font-bold
The quick brown fox jumped over the lazy dog.
.font-black
The quick brown fox jumped over the lazy dog.