Tailwind typography scale
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
| Token | Size | Line-height | Utility |
|---|---|---|---|
@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
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →