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.