Font families, letter spacing, and decoration
Use font-sans, font-serif, or font-mono to select configured font stacks. A project can define its preferred font family in its design tokens or CSS. Loading a web font is a separate concern: make sure the font resource is available, use sensible fallbacks, and consider performance.
Tracking utilities control letter spacing: tracking-tight can suit large headlines, while tracking-wide can help short uppercase labels. Decoration utilities include underline, no-underline, and decoration color/style utilities. Avoid using underline styling in a way that makes non-links look like links.
Font and decoration
<div class="space-y-3">
<h2 class="font-sans text-2xl font-bold tracking-tight">Readable interface text</h2>
<p class="font-mono text-sm text-slate-600">task.status = "complete"</p>
<a class="font-medium text-blue-700 underline decoration-blue-300 underline-offset-4 hover:decoration-blue-700" href="#details">
Read the implementation notes
</a>
</div>đź’ˇ The sans stack is suitable for interface copy, monospace signals code, and the link's underline remains visible while changing on hover. The semantic
<a> element—not the color—provides link behavior.Knowledge Check
Which element should normally be used for a navigation link?