Type scale generator

Build a modular type scale from a base size and a ratio, see every step set in the real face, and copy it as Tailwind theme variables.

text-4xl48.828px · 3.052rem · 1.25

Ship the interface, keep the code

text-3xl39.063px · 2.441rem · 1.32

Ship the interface, keep the code

text-2xl31.25px · 1.953rem · 1.39

Ship the interface, keep the code

text-xl25px · 1.563rem · 1.46

Ship the interface, keep the code

text-lg20px · 1.25rem · 1.53

Ship the interface, keep the code

text-base16px · 1rem · 1.6

Ship the interface, keep the code

text-sm12.8px · 0.8rem · 1.67

Ship the interface, keep the code

theme.csscss
@theme {
  --text-sm: 0.8rem;
  --text-sm--line-height: 1.67;
  --text-base: 1rem;
  --text-base--line-height: 1.6;
  --text-lg: 1.25rem;
  --text-lg--line-height: 1.53;
  --text-xl: 1.563rem;
  --text-xl--line-height: 1.46;
  --text-2xl: 1.953rem;
  --text-2xl--line-height: 1.39;
  --text-3xl: 2.441rem;
  --text-3xl--line-height: 1.32;
  --text-4xl: 3.052rem;
  --text-4xl--line-height: 1.25;
}
Made something you like?Blocks set on a scale like this

Questions

Which ratio should I pick?+

1.2 or 1.25 for an interface, where most sizes sit close together and the headings must not shout. 1.5 and up for editorial pages, where a large heading is the point.

Why does the line height shrink as the size grows?+

Because leading is relative to the size. A heading set at body leading looks unfinished, so each step tightens a little; the scale here does it for you and you can override any of them.

How do I use the output?+

Paste the @theme block into your CSS entry file. Tailwind v4 reads text sizes and their line heights from those variables, so text-2xl picks up both at once.

Related tools

px to rem converterConvert between px and rem at any root size, both ways, with the sizes you actually use listed out underneath.Tailwind color scale generatorTurn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste.Aspect ratio calculatorTurn any width and height into a reduced ratio, a decimal and the Tailwind class, resize to a new width while keeping the shape, and copy the aspect-ratio rule that reserves the space before the image loads.

The tools are free. So is most of the library.

2189 blocks and 1325 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

Browse the blocks

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version