CSS ClampCSS ClampConvert between px, rem and vw with any base size.
1.5rem3.3333vwCommon values with the default root font size of 16px.
| px | rem | px | rem |
|---|---|---|---|
| 1px | 0.0625rem | 24px | 1.5rem |
| 2px | 0.125rem | 28px | 1.75rem |
| 4px | 0.25rem | 32px | 2rem |
| 6px | 0.375rem | 36px | 2.25rem |
| 8px | 0.5rem | 40px | 2.5rem |
| 10px | 0.625rem | 48px | 3rem |
| 12px | 0.75rem | 56px | 3.5rem |
| 14px | 0.875rem | 64px | 4rem |
| 16px | 1rem | 72px | 4.5rem |
| 18px | 1.125rem | 80px | 5rem |
| 20px | 1.25rem | 96px | 6rem |
A rem is relative to the root font size. When a user raises their browser’s default font size, everything sized in rem grows with it, while pixel values stay the same. Designs are usually made in pixels, so converting is a daily task when you turn a design into CSS.
Once you have a mobile and a desktop size, you do not need to pick one. A clamp() value grows from one to the other as the screen gets wider, and mixes rem and vw so it still respects the user’s font size. Enter both sizes in the clamp() generator, or read the maths behind clamp() to see how rem and vw combine.
Divide the pixel value by the root font size. With the default root font size of 16px, 24px is 24 / 16 = 1.5rem. To go back, multiply: 1.5rem × 16 = 24px.
Every major browser uses 16px as the default font size, so 1rem is 16px unless the user or your CSS changes it. Users can raise the default in their browser settings, which is exactly why rem is useful: your layout follows their choice.
That trick makes 1rem equal 10px so the maths is easier, but it forces you to reset the body font size and can confuse third-party components that expect 16px. Converting with a tool or a Sass or CSS function is usually the cleaner choice.
Divide the pixel value by the screen width and multiply by 100. On a 1440px screen, 48px is 48 / 1440 × 100 = 3.333vw. A vw value alone does not respect zoom or the user’s font size, so combine it with rem inside clamp() for font sizes.
Use rem for font sizes and for spacing that should grow with the text, like padding around paragraphs. Pixels are fine for borders, shadows and other details that should stay sharp and fixed.