CSS unit converter
Convert between px, rem, em, pt and % against a configurable root font size. Type a value and copy any unit.
What this CSS unit converter does
Enter a value, choose its unit, and the tool shows the equivalent in each of the other four units (px, rem, em, pt and %) with a copy button next to each. All conversions go through pixels using the root font size you specify, so rem, em and % scale together when you change the base from the 16px browser default to, say, 18px for a content site or 10px for a 62.5 percent reset. The output is trimmed to at most four decimals, which is more than any browser renders.
How to use it
- Type the Value.
- Pick the From unit: px, rem, em, pt or %.
- Set Root font size (px) to match your project’s
html { font-size }. Leave 16 if you never changed it. - Click the copy button beside the unit you need; it copies the number with its unit suffix, ready to paste into a stylesheet.
Conversion formulas
With base = root font size in px:
| From | To px | Example at 16px base |
|---|---|---|
| rem | value × base | 1.5rem = 24px |
| em | value × base (parent size in real CSS) | 0.875em = 14px |
| % | value × base ÷ 100 | 150% = 24px |
| pt | value × 96 ÷ 72 | 12pt = 16px |
| px to rem | value ÷ base | 20px = 1.25rem |
Handy values at 16px: 4px = 0.25rem, 8px = 0.5rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem, 64px = 4rem.
CSS units reference
| Unit | Relative to | Good for | Watch out |
|---|---|---|---|
px | CSS reference pixel (1/96in) | Borders, shadows, 1px hairlines, media query breakpoints | Ignores user font-size preference |
rem | Root font-size | Font sizes, spacing scales, max-widths, layout gaps | Everything moves together; fine, that is the point |
em | Element’s own font size | Padding and margins inside components that should scale with their text, icon sizes, media queries (em in media queries uses the browser default, not the root) | Compounds when nested: 1.2em inside 1.2em is 1.44 |
% | Parent’s corresponding dimension (font-size: parent font size) | Fluid widths, font-size: 62.5% resets | Percent height needs a sized parent |
vw / vh | 1 percent of viewport width / height | Full-bleed sections, hero heights, fluid type with clamp() | 100vw includes the scrollbar; 100vh is wrong under mobile browser bars |
dvh / svh / lvh | Dynamic / smallest / largest viewport height | min-height: 100dvh for full-screen layouts on mobile | Supported since Safari 15.4 and Chrome 108 |
ch | Width of the 0 glyph in the current font | max-width: 65ch for readable line length, monospace layouts | Changes with font; not a character count in proportional fonts |
ex / cap / lh | x-height / cap height / line-height | Aligning icons to text | Niche; lh landed in Chrome 109, Safari 16.4 |
vmin / vmax | Smaller / larger of vw and vh | Square elements that fit any orientation | Rarely needed |
cqw / cqi | Container query width / inline size | Component-level fluid type | Needs container-type on an ancestor |
When to use which
- Typography: rem. A
font-size: 1.125remhonors a user who set their browser to 20px;18pxdoes not. Build a type scale in rem and keep line-height unitless (line-height: 1.5). - Component-internal spacing: em. Padding on a button in em grows with the button’s font size, so a large variant needs only a font-size change.
- Page-level spacing and layout: rem. Grid gaps, section padding and container max-widths in rem keep the layout proportional to text. See the CSS Grid guide and the Flexbox guide for how gap and sizing interact.
- Hairlines and pixel-precise details: px. A
1pxborder should stay 1px;0.0625remis just a harder way of writing it. - Media queries: px or em. Breakpoints in em respond to browser zoom consistently across engines; in px they are easier to match to design specs. Avoid rem in media queries since the root size does not apply there.
- Full-height layouts: dvh with a vh fallback. Write
min-height: 100vh;thenmin-height: 100dvh;on the next line so older browsers keep the first. - Fluid type: clamp with rem and vw.
font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem)scales between 16px and 24px without a media query, and still responds to zoom because of the rem terms.
Related tools and snippets
- Aspect ratio calculator for the other dimension math you do while laying out media boxes.
- Border radius generator and Box shadow generator, which output px values you may want in rem.
- Responsive auto grid uses
minmaxwith rem-based minimums. - Truncate text multiline pairs with a
ch-based max-width for readable cards.
FAQ
How is rem converted to px?
1rem equals the root font size, which you set in the tool (16px by default, matching every browser's default). So 24px is 1.5rem, 14px is 0.875rem and 1.25rem is 20px. Change the root size to 10px and 24px becomes 2.4rem.
What base does em use here?
For convenience the tool treats em like rem, relative to the root size you set. In a real page em is relative to the element's own computed font size, which is inherited from its parent, so set the base field to that parent size when you need element-relative values.
Why convert px to rem at all?
rem scales with the user's browser font-size preference, which about 3 percent of users change for accessibility. px does not. Designers work in px, so converting at the end is the usual workflow.
How does pt relate to px?
CSS defines 1in as 96px and 1pt as 1/72in, so 1pt is 1.3333px and 12pt is exactly 16px. This is the CSS reference pixel, not the physical pixel density of your screen.
What about vw, vh, ch and other units?
Those depend on the viewport or the font's glyphs, so there is no fixed px value to convert to. The reference table on this page explains each one; the converter covers the units with a stable relationship to px.
Should the root font size be 62.5 percent so 1rem is 10px?
It makes mental math easier but it is mostly a legacy trick. If you do use it, set the tool's root font size to 10 and every rem value will match your stylesheet.