Typography Scale Calculator
Quick answer
Pick a base size and ratio—the tool lists stepped sizes you can map to roles (H1, H2, body).
For a related estimate, see Css Unit Converter.
Explore further: Font Pairing Tool · Pixel Ruler Overlay
Why ratios
Ratios reduce arbitrary jumps. You still need manual tuning for small screens—scales are a starting point, not a law.
Explore further: Grid Overlay Tool · File Size Calculator
A modular scale ties font sizes to a ratio so headings and body text feel cohesive. Use it when you are defining design tokens or refactoring CSS font-size variables.
How to use this calculator
- Open the tool: Choose base px and a musical interval (1.25, 1.333, 1.5 are common).
- Tune inputs: Generate steps up and down.
- Read the output: Round to whole pixels where your grid requires, then document tokens.
Real-world examples
- 1.25 ratio: 16 → 20 → 25 → 31—good for dense dashboards.
- 1.333: Slightly larger jumps—often nicer for marketing headings.
Explore further: Accessible Color Palette
Tips & gotchas
Pair scale with line-height and max line width—big type with long lines still reads poorly.
FAQ
Should I use rem or px?
Prefer rem/em for accessibility—users can scale root font size in the browser.
Does this tool send my text to a server?
Calciverse runs in your browser; we do not store your inputs on our servers for these utilities. Anything that uses network APIs (for example DNS lookup) only sends what you explicitly request.
Why do results differ from another site?
Rounding, defaults, and implementation details (color spaces, tokenizers, DNS resolvers) can differ. Compare definitions, not just the headline number.