Set text size and weight

A heading often combines several typography decisions in one class list:

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

Each utility controls a separate CSS property:

• text-4xl sets font-size from the type scale
• font-bold sets font-weight: 700
• leading-tight sets line-height: 1.25
• tracking-tight sets letter-spacing: -0.025em

Use only the decisions the text needs. Tight line height works for a short display heading. On a three-line paragraph it makes the lines collide. Small text usually needs more line height, not a shrunken copy of the heading styles.

Size and line height together

Tailwind lets you set both in one class with a slash:

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

text-base/7 is font-size: 1rem with line-height: calc(var(--spacing) * 7), which is 1.75rem. I use this form for body text a lot, because size and line height belong together and it saves a class.

Build a small type system

Don’t pick sizes page by page. Decide a few roles once: a page title, a section heading, body text, and a supporting label. Give each a size, a weight, and a color. Keep the differences restrained. Four sizes and three weights cover most sites.

Semantics and visuals are separate

Heading levels describe document structure. Visual size describes emphasis. Keep h1 to h6 in order, and style them however the design needs. An h3 can be smaller than a paragraph if that’s the design. And a big price in a product card is not a heading, so don’t make it one for the size.

Responsive type

Display type often needs text-4xl md:text-6xl. Body text rarely benefits from a jump between breakpoints. Test long words, translated strings, zoom, and a user who set a larger default font in the browser.

Missing weights

Not every font ships every weight. If you ask for font-bold and only the regular file is loaded, the browser fakes it by smearing the glyphs. It looks worse than the real face. Load the weights you use, and check the rendered font in the DevTools Computed panel.

Try this: define four text roles with no more than four sizes and three weights. Test a long heading at narrow width and 200% zoom, and explain every line-height choice.