Typography Scale
Generate a modular type scale with CSS custom properties, SCSS, Tailwind config, or fluid clamp values.
Free & unlimited
-2xsThe quick brown fox jumps over the lazy dog0.64rem · 10pxLH 1.5
-1smThe quick brown fox jumps over the lazy dog0.8rem · 13pxLH 1.5
+0baseThe quick brown fox jumps over the lazy dog1rem · 16pxLH 1.5
+1lgThe quick brown fox jumps over the lazy dog1.25rem · 20pxLH 1.45
+2xlThe quick brown fox jumps over the lazy dog1.563rem · 25pxLH 1.4
+32xlThe quick brown fox jumps over the lazy dog1.953rem · 31pxLH 1.35
+43xlThe quick brown fox jumps over the lazy dog2.441rem · 39pxLH 1.3
+54xlThe quick brown fox jumps over the lazy dog3.052rem · 49pxLH 1.25
+65xlThe quick brown fox jumps over the lazy dog3.815rem · 61pxLH 1.2
+76xlThe quick brown fox jumps over the lazy dog4.768rem · 76pxLH 1.15
+87xlThe quick brown fox jumps over the lazy dog5.96rem · 95pxLH 1.1
xs
sm
base
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
:root {
--font-size-xs: 0.64rem; /* 10px */
--font-size-sm: 0.8rem; /* 13px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.25rem; /* 20px */
--font-size-xl: 1.563rem; /* 25px */
--font-size-2xl: 1.953rem; /* 31px */
--font-size-3xl: 2.441rem; /* 39px */
--font-size-4xl: 3.052rem; /* 49px */
--font-size-5xl: 3.815rem; /* 61px */
--font-size-6xl: 4.768rem; /* 76px */
--font-size-7xl: 5.96rem; /* 95px */
--line-height-xs: 1.5;
--line-height-sm: 1.5;
--line-height-base: 1.5;
--line-height-lg: 1.45;
--line-height-xl: 1.4;
--line-height-2xl: 1.35;
--line-height-3xl: 1.3;
--line-height-4xl: 1.25;
--line-height-5xl: 1.2;
--line-height-6xl: 1.15;
--line-height-7xl: 1.1;
}All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Set base size
Choose your base font size (typically 16px).
- 2
Pick a scale
Select a modular scale ratio (Minor Third, Major Third, Perfect Fourth, etc.).
- 3
Preview hierarchy
See the complete type scale from h1 to small text.
- 4
Copy CSS
Copy CSS custom properties or direct declarations.
- The Perfect Fourth (1.333) scale is a safe, versatile choice.
- Use fewer scale steps for smaller screens, more for large screens.
- Consistent type scales create visual harmony across your design.
- CSS custom properties make it easy to adjust the scale globally.
- Multiple scales
- Base size control
- Preview hierarchy
- CSS custom properties
- rem/px output
- Establish a consistent type hierarchy for a new project.
- Create responsive typography systems.
- Match typography to existing design systems.