Typography Scale Generator

Generate a harmonious type scale using musical ratios for consistent hierarchy.

Base Size (px)

Scale Ratio

Steps

The quick brown fox

9px

The quick brown fox

12px

base

The quick brown fox

16px

The quick brown fox

21.33px

The quick brown fox

28.43px

2xl

The quick brown fox

37.9px

3xl

The quick brown fox

50.52px

4xl

The quick brown fox

67.34px

CSS Variables Output

--text-xs: 9px;
--text-sm: 12px;
--text-base: 16px;
--text-lg: 21.33px;
--text-xl: 28.43px;
--text-2xl: 37.9px;
--text-3xl: 50.52px;
--text-4xl: 67.34px;