Unsure what size to set your headlines and body copy—especially when you factor in tablet and mobile views? You’re not alone. The good news is that there’s now a better, simpler way to achieve perfectly scaled type across all devices, thanks to type scales and the power of CSS clamp functions.
One Calculator to Rule Them All
By combining a type scale approach and clamp functions, this new form offers sensible defaults for H1 through H6 plus body/paragraph text—so you can quickly achieve a consistent hierarchy no matter the device or screen size.
- Type Scale Theories Are Great — But Incomplete
Most type scale calculators give you static values for the desktop size only. If you’re lucky, they may include a mobile size as well… But none that I found gave me all the sizes/breakpoints I needed. - Clamp Functions Automate Responsiveness
All of the clamp() calculators out there work great — but you have to calculate sizes one-by-one, making it a time consuming process.
This calculator combines the best of both worlds, giving you a sensable starting point that you can copy/paste all in one go!
How It Works (In a Nutshell)
- Choose Your Body Font Size
Start with a typical body copy size (e.g., 16px, 18px, 20px). The calculator will convert everything to rem (or the unit of your choice), making it easier to maintain consistent sizing throughout your site. - Pick a Type Scale
Whether you favor a small step-up between heading levels or you love a bold jump (like the golden ratio), you can select from various built-in scales. Each heading (H1–H6) and paragraph tag will then be assigned a size proportionate to your chosen scale. - Clamp Magic
The tool automatically generates clamp() values for each heading and your body copy. This allows the font to scale smoothly from a minimum to a maximum size based on the viewport width. No more separate breakpoints to manage—you get fluid responsiveness by default. - Copy & Paste Into Your Theme or CSS
Once you’re done, you’ll see a list of clamp() rules you can drop directly into your theme customizer or style sheet. If you’re using GeneratePress (or any theme that allows custom CSS), you can paste them right in. Everything will be good to go out of the box.
These clamp-based calculations ensure that your font sizes shrink appropriately for smaller screens and expand elegantly for larger screens. In other words, you retain a beautiful hierarchy across devices without having to set individual values for each breakpoint.
