Typography utilities
Utility classes for controlling font size, weight, alignment, and text decoration.
Font size
Use these classes to set font sizes. Sizes scale fluidly between mobile and desktop.
<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2XL</p>
<p class="text-3xl">3XL</p>
<p class="text-4xl">4XL</p>
<p class="text-5xl">5XL</p>.text-xs — 11.2px → 12px
.text-sm — 12.8px → 14px
.text-base — 14.4px → 16px
.text-lg — 16px → 18px
.text-xl — 17.6px → 20px
.text-2xl — 20px → 24px
.text-3xl — 24px → 32px
.text-4xl — 28px → 48px
.text-5xl — 32px → 64px
Font weight
Control font weight with these utility classes.
<p class="font-normal">Normal weight (400)</p>
<p class="font-medium">Medium weight (500)</p>
<p class="font-bold">Bold weight (700)</p>.font-normal — font-weight: 400
.font-medium — font-weight: 500
.font-bold — font-weight: 700
Text alignment
Align text within its container.
<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>.text-left — Left aligned
.text-center — Center aligned
.text-right — Right aligned
Text color
Use .text-accent to apply the theme accent color to text.
<p class="text-accent">Accent colored text</p>Accent colored text
Text highlight
Use the .text-highlight class to highlight text or parts of a text.
<p>This is a <span class="text-highlight">highlighted</span> text.</p>This is a highlighted text.