crucıble

Tool

Type Scale

Compose a modular type scale — pick a base size and a ratio, choose how many steps run up and down, and watch every step render live with its px, rem, and line-height. Export as CSS custom properties, a Tailwind v4 @themeblock, or plain CSS classes.

Scale ratio

Steps

Line height

Leading eases from the body value at base to the heading value at the largest step.

Preview

  • text-4xl48.83px3.0518remlh 1.1
    The quick brown fox jumps
  • text-3xl39.06px2.4414remlh 1.18
    The quick brown fox jumps
  • text-2xl31.25px1.9531remlh 1.26
    The quick brown fox jumps
  • text-xl25px1.5625remlh 1.34
    The quick brown fox jumps
  • text-lg20px1.25remlh 1.42
    The quick brown fox jumps
  • text-base16px1remlh 1.5
    The quick brown fox jumps
  • text-sm12.8px0.8remlh 1.5
    The quick brown fox jumps
  • text-xs10.24px0.64remlh 1.5
    The quick brown fox jumps
/* Modular type scale — base 16px · ratio 1.25 · unit rem */
:root {
  /* font sizes */
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.9531rem;
  --text-3xl: 2.4414rem;
  --text-4xl: 3.0518rem;

  /* line heights */
  --leading-xs: 1.5;
  --leading-sm: 1.5;
  --leading-base: 1.5;
  --leading-lg: 1.42;
  --leading-xl: 1.34;
  --leading-2xl: 1.26;
  --leading-3xl: 1.18;
  --leading-4xl: 1.1;
}

rem values assume a 16px root font size. Reference tokens as var(--text-lg) or the text-lg utility.