| Level | Step | Desktop Size | Mobile Size | clamp() |
|---|
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.
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
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.
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.
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.