{Werner Glinka}

Simplifying Responsive Font Sizing with a Clamp Calculator

This post follows an earlier post Better Responsive Websites with Clamp.

While working on the Minneapolis project, using WordPress as a CMS that feeds content to a Metalsmith Static Site Generator, I reviewed several articles about fluid type scale. I used what I had learned in my typography. I also found an interesting article on CSS-Tricks, Linearly Scale font-size with CSS clamp() Based on the Viewport, which describes a tool to calculate the clamp function. I forked the calculator and implemented it in pure javascript.

This handy tool makes it easy to calculate and generate CSS clamp functions for responsive font sizing. And it also works great for padding and margins.

The Clamp Calculator

The "Clamp Calculator" widget is a user-friendly tool that helps web developers define CSS clamp functions for responsive font sizing, padding and margins. It calculates the optimal CSS clamp function by inputting minimum and maximum viewport widths and font-size values. The clamp function ensures that the font size smoothly adjusts between the minimum and maximum values based on the viewport width.

The widget is built with HTML, CSS, and vanilla JavaScript, and it uses a straightforward structure with essential styling for user interface elements.

Input Section

The input section comprises various form elements to input the parameters for the clamp function. These parameters include:

  • Minimum Viewport Width (minWidth)
  • Maximum Viewport Width (maxWidth)
  • Minimum Font Size (minFontSize)
  • Maximum Font Size (maxFontSize)
  • Pixels per Rem (pxPerRem)
<!-- Input Section -->
<div class="form-wrapper">
  <form>
    <!-- Form groups for each input -->
    <div class="form-group">
      <label for="minWidth">Min Viewport Width:</label>
      <input 
        type="number" 
        class="form-control" 
        id="minWidth" 
        value=""
        onInput="updateResult(this.value, this.id)"
      ><span>px</span>
    </div>
    <!-- More form groups for other parameters -->
    <!-- ... -->
  </form>
</div>

Output Section

The output section shows the calculated clamp function that ensures responsive font sizing based on the provided parameters.

<!-- Output Section -->
<div id="result"></div>

Calculating the Clamp Function

The JavaScript code calculates the clamp function using the input parameters. It then updates the result div with the calculated clamp function.

const parameters = {
  minWidth: 320,
  maxWidth: 1200,
  minFontSize: 2,
  maxFontSize: 4,
  pxPerRem: 10,
};

function calculateClampFunc() {
  const minWidth = parameters.minWidth / parameters.pxPerRem;
  const maxWidth = parameters.maxWidth / parameters.pxPerRem;
  const slope = (parameters.maxFontSize - parameters.minFontSize) / (maxWidth - minWidth);
  const yAxisIntersection = -minWidth * slope + parameters.minFontSize;
  const clampFunc = `clamp(${parameters.minFontSize}rem, ${yAxisIntersection.toFixed(4)}rem + ${(slope * 100).toFixed(4)}vw, ${parameters.maxFontSize}rem)`;
  // update the result div
  document.querySelector('#result').innerHTML = clampFunc;
}

function updateResult(value, id) {
  // Update the parameters object
  parameters[id] = Number(value);
  // Calculate the clamp function parameters and update the result div
  calculateClampFunc();
}

Copy to Clipboard

A copy button is provided to copy the generated clamp function to the clipboard.

<!-- Copy to Clipboard -->
<div class="copy-wrapper">
  <svg viewBox="-40 0 512 512" id="copyThis">
    <!-- SVG Path for the copy icon -->
  </svg>
</div>

This JavaScript code handles the copy action when the copy button is clicked.

document.querySelector('#copyThis').addEventListener('click', () => {
  const txt = document.querySelector('#result').innerHTML;
  const t = document.createElement("textarea");
  t.value = txt;
  document.body.appendChild(t);
  t.select();
  document.execCommand("copy");
  document.body.removeChild(t);

  alert(`${txt} Copied to clipboard!`);
});

Styling

The widget has minimal styling to ensure a clean and user-friendly interface.

Conclusion

In summary, the Clamp Calculator is an excellent tool for web developers aiming to streamline responsive font sizing in their projects. By offering the ability to input key parameters and instantly generate the CSS clamp function, the widget eases the process of creating a responsive and harmonious typographic experience.

The "Clamp Calculator" can be found online here: https://css-clamp-calculator.netlify.app/. The code can be found on GitHub: https://github.com/wernerglinka/clamp-calculator.

Scroll to top