Tailwind typography scale

← All tools

Pick a base size and modular ratio. Get a specimen preview and a valid v4@theme block with --text-* and--text-*--line-height tokens.

~~~

Presets

Inputs

~~~

Specimen

Scale table

TokenSizeLine-heightUtility

@theme output

Scale settings are saved in the URL for sharing.

~~~

About this tool

A modular scale multiplies (or divides) a base size by a constant ratio. Tailwind v4 font-size tokens use --text-lg for the size and--text-lg--line-height for the paired line-height.

Names follow the usual xs / sm / base / lg / xl ladder when possible. Add a prefix if you want a parallel scale (e.g. display-lg).

~~~

Read more