How to use it
- Set the base font-size (16px unless you change it), the parent size that em and % are measured against, and the viewport for vw and vh — my screen fills in the current window.
- Enter a value with a unit:
24px,1.5rem,50vw,12pt. The table on the right lists every unit with a copy button; ↺ makes any row the new source value. - The px → rem scale and the typography table follow your base — clicking a value copies it.
- In the clamp() generator give the small size at a narrow screen and the large size at a wide one, and take the finished
clamp(1rem, 0.7407vw + 0.8333rem, 1.5rem)in rem or in px, with the arithmetic shown underneath.
How px, rem, em and the rest relate
The pixel is the only absolute unit on screen; everything else is measured against something. rem comes from the font-size of the root html element, normally 16px, which makes 24px equal to 1.5rem and 1rem equal to 16px. em and % come from the parent size, which is why nested em values compound. vw and vh are percentages of viewport width and height, vmin and vmax of the shorter and the longer side. The typographic units pt, pc, in, cm and mm hang off a CSS inch of 96px: 1px = 0.75pt, so 12pt = 16px.
All four parameters stay under your control, so the answer is honest for your project rather than for a default one. Move the base to 10px — the html{font-size:62.5%} trick — and the table, the scale and the clamp() output all follow.
Why a front-end dev or a media buyer needs it
- The mockup is in pixels and the CSS wants rem, because a visitor who raised the system font size otherwise gets a broken page. The 8 to 96px scale in rem covers most of what a layout actually uses: spacing, radii, font sizes.
- A landing page gets read on a 360px phone and on a 1920px monitor. One
clamp()heading replaces a stack of media queries, and the generator works out the slope and the intercept. - Reading a layout you did not write:
2.5vwin a banner — how much is that at 1080px? Change the viewport width and the answer moves with it.
How clamp() is put together
A fluid size is a straight line between two points: the small size at the narrow screen width and the large size at the wide one. The slope is Δsize ÷ Δwidth, and multiplied by 100 it becomes the vw coefficient; the intercept is the small size minus slope × narrow width, converted to rem. For 16px at 360 and 24px at 1440 that gives clamp(1rem, 0.7407vw + 0.8333rem, 1.5rem). The tool hands you both the rem version, which follows the font size the reader has set, and the px one, and prints the whole calculation so you can check it by hand.
Questions
How many px are in 1 rem?
As many as the font-size of the root html element says. Every browser defaults to 16px, which makes 1rem = 16px, 1.5rem = 24px and 0.875rem = 14px. If your project redefines the base, put that number into the settings above.
What is the difference between rem and em?
rem is measured from the root and means the same everywhere in the document. em is measured from the parent and compounds with nesting: 1.2em inside 1.2em lands at 1.44 of the base. Font sizes and spacing are usually safer in rem; em suits a component that should scale together with its own text.
How do I convert px to vw?
vw = px ÷ viewport width × 100. 24px at 1440px is 1.6667vw, and at 360px it is already 6.6667vw. That is why plain vw for text is risky — it collapses on a narrow screen and swells on a wide one, which is what clamp() exists for.
What does clamp() do and how is it calculated?
clamp(min, preferred, max) pins a value between a floor and a ceiling and grows it with vw in between. The generator below takes two points — the size at the narrow width and at the wide one — and returns the finished declaration.
Why does pt here disagree with my word processor?
It does not: in CSS 1pt is 1/72 inch and 1px is 1/96 inch, so 12pt = 16px and 9pt = 12px. Any difference comes from page zoom in the editor or from screen DPI, neither of which a CSS pixel depends on.
