About This Tool
Documentation
What does this tool do?
A typographic scaling engine that computes fluid font sizes for entire type scales (H1 through H6, body, caption). Set minimum and maximum viewport bounds and base font sizes to calculate mathematical `clamp()` rules that eliminate abrupt media query font resizing.
When should you use it?
Use this tool when designing responsive typography systems, ensuring headline readability on mobile devices without manual media query overrides, and creating harmonious editorial type scales.
Key Capabilities & Features
Highlights
Calculate responsive font sizes with fluid viewport scaling using CSS clamp() and calc()
Define minimum and maximum font sizes with corresponding mobile and desktop screen breakpoints
Support for modular typography scales (Minor Second, Major Third, Perfect Fourth, Golden Ratio)
Live preview showing heading hierarchy (H1–H6, body text) scaling with an interactive screen slider
Generate clean CSS typography variables ready for copy and paste