Typography
Font and Text Size
Typography utilities control font size, weight, family and more. Sizes run from text-xs up to text-9xl, and each size ships with a sensible line-height.
Size and weight
| Class | Font size |
|---|---|
| text-sm | 0.875rem |
| text-base | 1rem |
| text-lg | 1.125rem |
| text-xl | 1.25rem |
| text-2xl | 1.5rem |
| text-4xl | 2.25rem |
Example
<div>
<h1 class="text-3xl font-extrabold text-gray-900">Hire interns fast</h1>
<p class="text-base font-normal text-gray-600 mt-1">Verified candidates, AI-ranked.</p>
<p class="text-sm font-medium text-sky-600 mt-2">Learn more →</p>
</div>Font weight and family
font-light, font-normal, font-medium, font-semibold, font-bold and font-extrabold set weight. font-sans, font-serif and font-mono switch the family.
Example
<div class="space-y-1">
<p class="font-light">Light</p>
<p class="font-semibold">Semibold</p>
<p class="font-mono">const x = 1 // mono</p>
</div>