Streamline Your Typography with This Type Scale Calculator
This type scale tool uses the exact same calculations as the Automatic CSS framework, making it ideal for designers who want to maintain consistent font sizes from their Figma files through to development. Simply input your viewport min and max sizes, base font sizes, and preferred scale ratio, and the tool will generate all your heading sizes with visual previews so you can see exactly how your typography hierarchy will look. The best part? Each size comes with the complete clamp function showing both minimum and maximum pixel values, which you can copy directly into your Figma files for pixel-perfect design handoffs. Whether you’re working on a new project or refining an existing design system, this tool eliminates the guesswork and ensures your Figma designs will better match the actual font sizes in the live environment.
