Font Size and Font Weight
Use text-sm through text-9xl and font-thin through font-black to control the visual prominence of your text.
Tailwind's Font Size Scale
Set text size with the text-* scale, from text-xs up to text-9xl. Pick from these steps instead of typing pixels, and your typography stays consistent.
<p class="text-xs">Extra Small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra Large (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-6xl">6XL (60px)</p>Display and Hero Text Sizes
For big display text on hero sections, reach for text-7xl, text-8xl, or text-9xl. Pair them with font-extrabold and tracking-tight for headlines that grab attention.
<h1 class="text-7xl font-black tracking-tight text-gray-900">
Make it big.
</h1>All lessons in this course
- Font Size and Font Weight
- Text Color and Opacity
- Line Height and Letter Spacing
- Text Alignment and Decoration