When I’m building a completely custom design, like something I’ve created in Figma, I spend a lot of time fine-tuning typography in GeneratePress and GenerateBlocks. But for smaller projects where I don’t need a fully custom design, I prefer a faster solution that still looks great.
That’s where type scales come in. They allow you to quickly define font sizes with consistent steps between headings and paragraphs. However, most type scales I’ve found online only provide values for a single breakpoint, usually desktop. For responsive designs, I need font sizes that adjust dynamically across screen sizes.
To solve this, I worked with Mark from WS Form to create a Clamp Calculator that combines the power of type scales with fluid typography. This tool generates responsive font sizes for all your headings and paragraphs using CSS clamp functions. Let me show you how it works.
The Problem with Existing Tools
Type Scales
Type scales are great for defining consistent font sizes, but they often only provide static values for desktop. If you want responsive typography, you’ll need to manually adjust sizes for mobile and tablet.
Clamp Calculators
Clamp functions are perfect for fluid typography. They allow font sizes to scale proportionally between a minimum and maximum value based on the screen width. However, most clamp calculators require you to set each font size individually, which can be time-consuming.
The Solution: A Combined Calculator
The new Clamp Calculator combines the best of both worlds. It uses predefined type scales to generate responsive font sizes for all your headings (H1–H6) and paragraphs in one go.
How the Clamp Calculator Works
Step 1: Set the Body Font Size
Start by setting the base font size for your body text. The default is 16px, but you can adjust it using the arrows or by typing in a custom value.
As you change the body font size, the calculator updates in real time, giving you a visual representation of the font sizes for your headings and paragraphs.
Step 2: Choose a Type Scale
Select a type scale to define the steps between font sizes. For example:
- Minor Second: Small increments between font sizes.
- Golden Ratio: Larger jumps between font sizes.
The scale you choose will determine the relative sizes of your headings and paragraphs.
Step 3: Copy the Clamp Values
Once you’ve set your body font size and chosen a scale, the calculator generates clamp functions for each heading (H1–H6) and paragraph.
Implementing the Clamp Values
Option 1: Add Individual Font Sizes
- Copy the clamp value for a specific heading (e.g., H1).
- Go to your WordPress customizer and add a new typography setting for that heading.
- Paste the clamp value into the font size field.
Repeat this process for each heading and paragraph.
Option 2: Use the Complete CSS Implementation
For a faster setup, the calculator also provides a complete CSS implementation.
- Scroll to the Complete CSS Implementation section in the calculator.
- Copy all the CSS to your clipboard.
- Go to the WordPress customizer and paste the CSS into the Additional CSS section.
This method updates all your headings and paragraphs at once.
Utility Classes for Flexible Styling
The CSS implementation includes utility classes for each font size. For example:
fs-h1: Matches the font size of your H1.fs-p: Matches the font size of your paragraph.
Why This Is Useful
Sometimes, the semantic heading level (e.g., H3) doesn’t match the design’s visual requirements. For example, you might need an H3 to look like an H1.
With utility classes, you can easily adjust the font size without changing the semantic structure:
- Select the heading block.
- Add the utility class (e.g.,
fs-h1) under Additional CSS Classes.
This approach ensures your design looks great while maintaining proper accessibility and SEO.
Customizing the CSS
The CSS provided by the calculator is a great starting point, but you can customize it further. For example:
- Add font weights or line heights.
- Adjust specific heading styles.
If you’re using GeneratePress, you can also manage global typography settings directly in the customizer.
When to Use the Clamp Calculator
This calculator is perfect for projects where you need a quick, responsive typography setup. It’s especially useful for smaller projects or when you don’t have a fully custom design.
For completely custom designs, I still prefer to write all the CSS manually to ensure everything matches perfectly. But for most projects, this tool saves a ton of time while delivering great results.
Bonus: Customize the Calculator
Mark from WS Form has made this calculator available as a template you can import directly into WS Form. This means you can tweak it to fit your specific needs and use it on your own projects.
Wrapping Up
The Clamp Calculator is a powerful tool for creating fluid typography quickly and easily. It combines the precision of type scales with the flexibility of clamp functions, making it a great addition to any web design workflow.
Whether you’re building a custom design or just need something that looks good out of the box, this calculator can help you get up and running in no time.
A huge thanks to Mark for helping bring this tool to life. I’m excited to replace the old version of this calculator on The Admin Bar’s website with this much-improved version.
I hope this tool helps you speed up your projects and create better typography for your websites!
Kyle Van Deusen
After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a resident of the Commonwealth of Virginia.
