Type Scale Generator

Generate modular type scales with ratio-based sizing.

Base:px

9.00px

0.563rem

Typography Scale

12.00px

0.750rem

Typography Scale

base

16.00px

1.000rem

Typography Scale

21.33px

1.333rem

Typography Scale

28.43px

1.777rem

Typography Scale

2xl

37.90px

2.369rem

Typography Scale

3xl

50.52px

3.157rem

Typography Scale

4xl

67.34px

4.209rem

Typography Scale

5xl

89.76px

5.610rem

Typography Scale

CSS Custom Properties:

  --font-size-xs: 9.00px;
  --font-size-sm: 12.00px;
  --font-size-base: 16.00px;
  --font-size-lg: 21.33px;
  --font-size-xl: 28.43px;
  --font-size-2xl: 37.90px;
  --font-size-3xl: 50.52px;
  --font-size-4xl: 67.34px;
  --font-size-5xl: 89.76px;