Set text size and weight

A heading can combine several typography decisions:

<h1 class="text-4xl font-bold leading-tight tracking-tight">Build better pages</h1>

These utilities control separate CSS properties:

• text-4xl chooses a font-size token
• font-bold chooses a font-weight value
• leading-tight controls line height
• tracking-tight controls letter spacing

Use only the decisions the text needs. Tight line height can work for a short display heading but makes a multi-line paragraph difficult to read. Small text often needs more line height, not simply a smaller version of heading styles.

Tailwind also supports paired size and line-height forms such as text-base/7:

<p class="text-base/7 text-gray-700">A readable paragraph...</p>

Build a small type system instead of choosing sizes independently on each page. A title, section heading, body, and supporting label should have clear roles and restrained differences in size, weight, and color.

HTML structure and visual hierarchy are related but not interchangeable. Keep heading levels in document order. A heading can be styled smaller without changing its semantic level, and a large price is not automatically a heading.

Responsive typography should respond to a real need. Large display type may need text-4xl md:text-6xl, but body text rarely benefits from dramatic viewport jumps. Test long words, translated strings, zoom, and user font settings.

Not every font provides every declared weight. The browser can synthesize a weight, which may look different from the intended face. Load the weights you use and inspect the rendered font in DevTools.

Your action is to define four text roles using no more than four sizes and three weights. Test a long heading at narrow width and 200% zoom, then explain every line-height choice.