CSS Unit Converter — px / rem / em / % / pt / vw / vh
Convert any CSS length value between px, rem, em, %, pt, vw, and vh. Configurable root font size and viewport.
Por qué usar esta herramienta
05Free in-browser CSS unit converter. Enter a value and unit, and every other CSS length unit is computed simultaneously. Configurable root font size (defaults to 16px) and viewport dimensions (defaults to 1280×720) so the conversions match your design system.
Type a numeric value and pick a unit. Every other CSS length unit — px, rem, em, %, pt, vw, vh — is computed from the same value and displayed simultaneously. The conversions use your configured root font size and viewport dimensions, so they match the assumptions your design system uses.
px is absolute (the spec-defined CSS pixel). rem is relative to the root font size (defaults to 16px). em is relative to the parent element's font size — this tool treats em as equal to rem (parent = root), which is correct for most use cases; if your element nests inside a parent with a different size, the actual em value differs.
% in CSS is context-dependent: for fonts it's relative to the parent, for widths it's relative to the containing block. This tool treats % as relative to a 16px base for the round-trip math, which works for typography but not for layout-percent conversions — use it as a directional guide rather than a precise layout calculator.
vw / vh are 1% of the configured viewport width / height. Set the viewport fields to match your design's reference breakpoint (often 1280×720 for desktop, 360×640 for mobile) for accurate predictions. Pair with our Color Converter for color-system conversions in the same workflow, or Unit Converter for physical length units (km, miles, etc.).
Cómo usarla
04Revisiones rápidas antes de copiar
03Confirma que el formato de entrada es el que esperabas.
Revisa el resultado antes de usarlo en un documento, URL, configuración o mensaje.
Copia solo el resultado que necesitas.
Casos de uso
Designers often hand off spacing values in px. Convert each one to rem so your CSS scales with user font-size preferences (an accessibility win that doesn't cost anything).
When using CSS clamp(min, preferred, max) for fluid typography, the preferred value is often expressed in vw or a mix. Convert between px and vw to sanity-check that your minimum and maximum bounds make sense at the breakpoints you care about.
Print stylesheets often use pt (the typographic unit). When porting to or referencing them in screen contexts, convert pt to px (96/72 ratio) to align with how the screen will render the same value.
Some design systems use a 10px root size so 1rem = 10px (easy mental math). Set the root field to 10 and the rem/em conversions adjust accordingly — useful when porting designs that assume this convention.
Rule of thumb: typography should be rem (responsive to user prefs); fixed-pixel elements like icons or hairlines should be px. Use this tool to convert and pick the cleaner of the two for your specific use.
Consejos y trucos
- 01rem scales with user font preferences; px doesn't
Many users (often older users or accessibility settings) increase their browser's default font size from 16px to 20px or larger. Layouts in rem scale up gracefully; layouts in px stay rigid and can clip or overflow. Use rem for typography and spacing that should respect user prefs.
- 021pt = 1.333... px (96/72 ratio)
CSS defines the relationship as exactly 1in = 96px = 72pt. So 12pt is 16px, 14pt is ~18.67px. Print stylesheets are the main reason to deal with pt in CSS; for screen, px or rem is more idiomatic.
- 03vw and vh respect the viewport, not the document
A 100vh element fills the visible viewport, NOT the full document height. On mobile, vh has historically been quirky around the browser chrome (address bar). Modern CSS has svh / lvh / dvh for the small / large / dynamic viewport variants — convert by mental adjustment.
- 04% conversion is approximate
CSS % is context-sensitive: relative to parent font for font-size, to containing block width for widths, to containing block height for heights. This tool's % conversion assumes a 16px base, which works for typographic % but not for layout-percent. Use the result as a directional check, not a precise number.
Preguntas frecuentes
07
How is rem different from em?
rem is always relative to the root <html> element's font size (the 'root em'). em is relative to the parent element's font size, which means em values compound through nesting — 1em inside a 1.5em-sized parent works out to 1.5em of the grandparent. This tool treats em as equal to rem (parent = root), which is true for top-level elements but underestimates the effective em value in deeply-nested contexts.
Why is my converted value showing a long decimal?
Because the math is exact, not rounded. 17px / 16px-root = 1.0625rem exactly. In practice, you'd round to 1.06rem or even 1rem depending on how strict your design tokens are. The full precision is shown so you can decide where to round.
What's the right root font size to use?
Default to 16px — that's the browser default and what most design systems assume. Some teams use 10px (so 1rem = 10px makes mental math easy); just make sure your CSS sets html { font-size: 62.5%; } in that case so the rem values you write match the assumption.
How accurate are vw / vh conversions?
Accurate for the viewport size you configure. If your design references a 1280-wide desktop layout, set viewport width to 1280 and the vw conversion will match what users at that size see. For other breakpoints, adjust the viewport fields accordingly.
What about subpixel precision and device pixel ratio?
CSS px is a logical / reference pixel — it abstracts over device pixel ratio (DPR). On a 2× retina screen, 1 CSS px renders as 2 physical pixels but is still treated as 1 px for layout. The conversions here use CSS-px logic; you don't need to manually adjust for DPR.
Are conversions sent to a server?
No. Pure arithmetic in JavaScript — your values never leave the browser. No network calls.
Does the tool support ch, ex, or other lesser-used units?
Not currently. ch (width of '0') and ex (height of 'x') depend on the actual rendered font, which the tool doesn't have. For those rare units, use the browser's DevTools computed-style panel on an element using the unit to see the resolved px equivalent.
Herramientas relacionadas
02Conversor de Colores→
Convierte colores entre HEX, RGB, HSL y OKLCH con muestra en vivo y control deslizante de tono.
Verificador de Contraste de Color→
Comprueba el contraste entre color de primer plano y fondo según los umbrales WCAG 2.1 AA y AAA.