Typography and Content Styling

Create clear visual hierarchy with font families, sizes, weights, line heights, tracking, text decoration, and truncation.

Font size, weight, and line height

Typography utilities include text-sm, text-base, text-xl, font-medium, font-bold, and leading utilities such as leading-6 or leading-relaxed. Size alone does not establish hierarchy: weight, color, line height, and surrounding whitespace all contribute.

For long-form content, comfortable line height and a moderate line length improve scanning. Headings usually use tighter line height than paragraphs. Keep the hierarchy systematic rather than styling each heading arbitrarily.

Remember that responsive type can scale with prefixes: text-2xl sm:text-3xl lg:text-4xl. Always check that a heading wraps naturally on a narrow screen.

Typography hierarchy

<article class="max-w-2xl">
  <p class="text-sm font-semibold uppercase tracking-widest text-blue-700">Product update</p>
  <h1 class="mt-3 text-3xl font-bold leading-tight tracking-tight sm:text-4xl">
    A calmer way to manage your work
  </h1>
  <p class="mt-4 text-base leading-7 text-slate-600">
    Keep important tasks visible, group related work, and make the next step easy to find.
  </p>
</article>

💡 The uppercase eyebrow is small and widely tracked, the headline is large and tightly spaced, and the paragraph uses a more generous line height. This hierarchy guides the eye without relying on decorative effects.

Key Takeaways

Use line height intentionally for headings and paragraphs.
Responsive typography should be tested at narrow widths.
A clear hierarchy combines size, weight, spacing, and color.

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?

Text wrapping, truncation, and readable content

Long names, URLs, and untrusted user-generated text can break a layout. Utilities such as break-words, truncate, line-clamp-* (where available in your version), and whitespace-nowrap control wrapping and overflow. Use truncation only when hiding text is acceptable and the full value remains discoverable—for example, through a details view or an accessible label.

For paragraphs and articles, prioritize natural wrapping. Avoid whitespace-nowrap on long content in a narrow card unless horizontal scrolling or another clear behavior is intended.

Keep long task titles inside a card

<div class="flex min-w-0 items-start gap-3 rounded-xl border p-4">
  <input class="mt-1 size-4 shrink-0" type="checkbox" aria-label="Mark task complete">
  <div class="min-w-0 flex-1">
    <h3 class="truncate font-semibold" title="Prepare the detailed quarterly product reliability report">
      Prepare the detailed quarterly product reliability report
    </h3>
    <p class="mt-1 break-words text-sm text-slate-600">Owner: frontend-platform-team@example.com</p>
  </div>
</div>

💡 min-w-0 lets the flex child become narrower than its intrinsic content width. truncate clips the title with an ellipsis on one line. The title attribute can expose the full title on pointer hover, but do not rely on it as the only way to access important information.

Key Takeaways

Use truncate only when losing visible text is acceptable.
min-w-0 is a useful fix for overflow inside flex children.
Keep links and user-generated content readable at narrow widths.

Font size, weight, and line height

Font families, letter spacing, and decoration

Text wrapping, truncation, and readable content

STAY UPDATED WITH BYTES!