A Better Way to Set Up Fluid Typography with a Clamp Calculator

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 …

Kyle Van Deusen

Published:

Filed Under:

General

Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

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.

Is the the worlds best font ever
This content contains affiliate links. View our affiliate disclaimer.

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

  1. Copy the clamp value for a specific heading (e.g., H1).
  2. Go to your WordPress customizer and add a new typography setting for that heading.
  3. 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.

  1. Scroll to the Complete CSS Implementation section in the calculator.
  2. Copy all the CSS to your clipboard.
  3. 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:

  1. Select the heading block.
  2. 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!

Share This Article!
Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

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.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

Latest Events

August 19th, 2025

Which WordPress Page Builder is the Most Accessible?

The 2025 Page Builder Accessibility Report

August 15, 2025

Managing Your Agency with Moxie

Can this all-in-one solution help you streamline your agency and calm the chaos?

July 8th, 2025

Undeniable Social Proof

Discover how to turn client praise into persuasive video testimonials that help your agency cut through the noise.
Care Plan Toolkit

Save time, boost profits, and confidently manage client websites with proven tools, tips, and resources.

Bento Toolkit
The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

More Articles

Closing your sales

Stop Selling, Start Connecting: How Empathy Closes Clients

Learn how shifting from selling to empathetic connection can help you close more clients and build lasting relationships (bonus: it’s a whole lot easier than “selling”)

Selective focus of push pins connected with string 2024 11 18 22 54 47 utc

How to Create a Referral Program to Grow Your Client Base

A customer referral program is a great way to grow your client base & drive growth – but where do you start? Learn how to create a referral program that works.

Read more button

How to Make “Read More” Links Accessible (Without Sacrificing Design)

Simple tweaks to add meaning to your links, improve SEO, and avoid costly accessibility issues.