royalfig / fluid-typography-calculator

A fluid typography calculator. Determine the CSS clamp property given limits for font size and viewport width.

Fluid Typography Calculator 🧮

Instructions

How to Use This Calculator

• Enter min and max font sizes in px or rem. Your base font will always remain within these limits

• Enter your min and max viewport widths in px or rem.

• If the viewport is less than or equal to the minimum width and vice versa. In between these limits, font size will scale in proportion to the client's viewport width

• The Result panel shows the generated formula that you can copy into your CSS

Confused about fluid typography?

Read my post, "Fluid Typography" which explains how this calculator works in detail

Credits 👏

This calculator is inspired by Christopher Kirk-Nielsen's post, "Modern Fluid Typography with Clamp()"

For another fallback strategy that matches clamp's functionality, see Daniel Yuschick's "Fluid Typography with CSS Clamp() is My New Favorite Thing"