CSS Clamp Calculator

Overview

• Calculates a CSS clamp() value that smoothly scales with viewport width, from a min/max viewport width and the corresponding min/max font size.
• Instead of switching font-size at each media query breakpoint, a single clamp() declaration achieves smoothly scaling responsive font sizes (fluid typography).
• Use the preview slider to see how the font size changes as the viewport width changes.

Usage

1. Enter the viewport width range over which the font size should change into "Min/max viewport width (px)".
2. Enter the font sizes, in rem, that should correspond to that range into "Min/max font size (rem)".
3. Click the "Calculate" button to see the clamp() value and a preview. Drag the preview slider to see how the font size actually changes across viewport widths.

Example

Min width: 375px / Max width: 1280px / Min size: 1rem / Max size: 2rem

clamp(1rem, calc(0.5856rem + 0.1105vw), 2rem)

Use Cases

• Smoothly scaling heading or body font-size from mobile to desktop (fluid typography)
• Replacing per-breakpoint font-size declarations in media queries with a single clamp() declaration
• Mechanically deriving the CSS value to implement from a min/max font size specified in a design

FAQ

Notes

• The formula is based on the common fluid typography technique of expressing a line through two points — (min viewport width, min size) and (max viewport width, max size) — using CSS calc() and the vw unit.
• Below the min viewport width the font size stays fixed at the min size, and above the max viewport width it stays fixed at the max size (this is what clamp() enforces).
• The same approach can be applied to many other CSS length properties besides font-size, such as padding and gap.