Why does my clamp() value use rem instead of px?

Sizes declared in rem respect the reader's browser font-size setting. A px value ignores it, which fails WCAG 1.4.4 for users who have increased their default text size.

Do I need calc() inside clamp()?

No. Math expressions are allowed directly inside clamp(), so the preferred term can be written as a sum without wrapping it in calc().

CSS clamp() generator

Type scales that jump at breakpoints leave awkward gaps between them. clamp() interpolates smoothly instead, so a heading grows with the viewport and stops at the bounds you set. Enter the two sizes and the two viewport widths, and this generates the clamp() value plus the slope maths behind it.

settings

mode

single valuetype scale

min viewport

max viewport

min size

max size

unit

rempx

output

preview

The quick brown fox jumps over the lazy dog

size vs. viewport width

how to use it

01Enter the minimum font size and the viewport width where it applies.
02Enter the maximum font size and its viewport width.
03Copy the generated clamp() value into your stylesheet.

questions

Why does my clamp() value use rem instead of px?: Sizes declared in rem respect the reader's browser font-size setting. A px value ignores it, which fails WCAG 1.4.4 for users who have increased their default text size.
Do I need calc() inside clamp()?: No. Math expressions are allowed directly inside clamp(), so the preferred term can be written as a sum without wrapping it in calc().

how to use it

questions

related