pixel / type-scale
Type Scale Studio
Modular scale calculator. Twelve ratios, live preview, CSS export. Pick a ratio that has a reason — not one that just looks big.
Type Scale Studio
Perfect Fourth · 1.333 · 6.76px base
16px
12px18px24px
1.5
1.0 tight1.5 body2.0 loose
Scale Stats
Contrast ratio13.3×
Smallest step0.237rem
Largest step3.158rem
Body size0.422rem
Strong hierarchy. Good for editorial layouts.
Scale Preview
5xl
The quick brown fox
3.158rem
4xl
The quick brown fox
2.369rem
3xl
The quick brown fox
1.777rem
2xl
The quick brown fox
1.333rem
xl
The quick brown fox
1.000rem
lg
The quick brown fox
0.750rem
md
The quick brown fox
0.563rem
base
The quick brown fox
0.422rem
sm
The quick brown fox
0.317rem
xs
The quick brown fox
0.237rem
Proportion Bars
xs
0.237rem
sm
0.317rem
base
0.422rem
md
0.563rem
lg
0.750rem
xl
1.000rem
2xl
1.333rem
3xl
1.777rem
4xl
2.369rem
5xl
3.158rem
Suggested Pairings
Article
Title
The body text reads at 0.422rem, while the heading sits at 1.777rem.
Ratio: 4.21×
Card
Title
The body text reads at 0.563rem, while the heading sits at 1.333rem.
Ratio: 2.37×
Hero
Title
The body text reads at 0.422rem, while the heading sits at 2.369rem.
Ratio: 5.61×
UI Label
Title
The body text reads at 0.422rem, while the heading sits at 1.000rem.
Ratio: 2.37×
Generated CSS
:root {
--font-base: 16px;
--scale-ratio: 1.333;
--text-xs: 0.237rem;
--text-sm: 0.317rem;
--text-base: 0.422rem;
--text-md: 0.563rem;
--text-lg: 0.750rem;
--text-xl: 1.000rem;
--text-2xl: 1.333rem;
--text-3xl: 1.777rem;
--text-4xl: 2.369rem;
--text-5xl: 3.158rem;
}
.text-xs {
font-size: var(--text-xs);
line-height: 1.5;
letter-spacing: 0.01em;
}
.text-sm {
font-size: var(--text-sm);
line-height: 1.5;
letter-spacing: 0.01em;
}
.text-base {
font-size: var(--text-base);
line-height: 1.5;
letter-spacing: 0.01em;
}
.text-md {
font-size: var(--text-md);
line-height: 1.5;
letter-spacing: 0.01em;
}
.text-lg {
font-size: var(--text-lg);
line-height: 1.5;
letter-spacing: 0.01em;
}
.text-xl {
font-size: var(--text-xl);
line-height: 1.5;
letter-spacing: 0.01em;
}
.text-2xl {
font-size: var(--text-2xl);
line-height: 1.5;
letter-spacing: 0.01em;
}
.text-3xl {
font-size: var(--text-3xl);
line-height: 1.5;
letter-spacing: -0.01em;
}
.text-4xl {
font-size: var(--text-4xl);
line-height: 1.5;
letter-spacing: -0.01em;
}
.text-5xl {
font-size: var(--text-5xl);
line-height: 1.5;
letter-spacing: -0.02em;
}