Scale Settings
Type Scale
| Level | Step | Desktop Size | Mobile Size | clamp() |
|---|
Live Preview
Heading 1h1
Heading 2h2
Heading 3h3
Heading 4h4
Heading 5h5
Heading 6h6
Body text - The quick brown fox jumps over the lazy dog. A modular scale creates consistent visual hierarchy between headings and body text, making your typography look professional and harmonious.
π‘ How to Use
1. Choose a ratio (Perfect Fourth 1.333 or Golden Ratio 1.618 are recommended)
2. Set your base font size (16px is standard for body text)
3. Optionally adjust viewport ranges for clamp() generation
4. View the generated type scale and live preview
5. Copy the CSS code to your project with one click
β FAQ
What is a Modular Scale?
A modular scale is a sequence of numbers that relate to one another in a meaningful way using a fixed ratio. In typography, this means multiplying your base font size by the ratio repeatedly to create heading sizes. For example, with a Perfect Fourth ratio (1.333) and 16px body text, h3 would be 16Γ1.333β21px, h2 would be 21Γ1.333β28px, and so on.
Why use clamp() for fluid typography?
clamp(MIN, PREFERRED, MAX) is a CSS function that creates fluid font sizes that scale smoothly between viewport sizes. It combines the minimum size (mobile), preferred size (fluid calculation), and maximum size (desktop) into one value β eliminating the need for media queries and preventing abrupt size changes at breakpoints.
Which ratio should I choose?
Perfect Fourth (1.333) and Perfect Fifth (1.500) are the most commonly used web typography ratios, offering clear hierarchy distinction. Golden Ratio (1.618) is great for designs with strong visual contrast. Smaller ratios (1.200-1.250) work well for dense interfaces like dashboards. Start with 1.333 and adjust from there.