Conversor de unidades CSS
Introduce un valor una vez y míralo en todas las unidades de longitud de CSS — px, rem, em, pt, %, vw y vh — con el tamaño de fuente raíz, el tamaño de fuente del padre y el viewport que elijas. Copia cualquier resultado con un toque.
Conversiones comunes
Convertido a todas las unidades
rem, em y % dependen del tamaño de fuente; vw y vh dependen del viewport. px y pt tienen una proporción fija (1pt = 1,3333px). Ajusta el contexto de arriba si tus valores por defecto son distintos.
Referencia px a rem (raíz = 16px)
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
Con el tamaño de fuente raíz por defecto de 16px, divide los píxeles entre 16 para obtener rem, y multiplica por 0,75 para obtener puntos.
Acerca del conversor de unidades CSS
CSS ofrece varias formas de expresar una longitud, y elegir la correcta marca la diferencia entre un diseño que escala con elegancia y uno que se rompe. Este conversor transforma un solo valor en todas las unidades CSS comunes a la vez. px (píxeles) es la unidad de referencia absoluta: en CSS un píxel se define como 1/96 de pulgada. rem es relativo al tamaño de fuente raíz del documento (el elemento <html>), que por defecto es 16px, así que 1rem = 16px y 1,5rem = 24px; rem es el estándar moderno para dimensionar porque cambiar un único valor raíz reescala toda la página, lo cual es excelente para la accesibilidad. em es relativo al tamaño de fuente del elemento padre, por lo que se acumula al anidar. pt (puntos) es la unidad de impresión, fija en 1pt = 1/72 de pulgada = 1,3333px, así que 12pt = 16px. % en el contexto de font-size equivale al tamaño de fuente del padre, lo que hace que 100% sea igual a 1em. vw y vh son el 1% del ancho y el alto del viewport, ideales para diseños fluidos a pantalla completa. Define tu propio tamaño de fuente raíz, tamaño de fuente del padre y tamaño del viewport en el panel avanzado; los valores por defecto sensatos (16/16/1920×1080) cubren el caso cotidiano px↔rem de inmediato.
Cómo convertir unidades CSS
- 1 Escribe un valor y elige la unidad en la que está (por ejemplo 24 px o 1,5 rem).
- 2 Lee el valor equivalente en todas las demás unidades en la cuadrícula de resultados y toca el botón de copiar de cualquier tarjeta para copiarlo listo para pegar (p. ej. «1.5rem»).
- 3 Abre el panel avanzado para cambiar el tamaño de fuente raíz, el tamaño de fuente del padre o el tamaño del viewport si tu proyecto no usa los valores por defecto 16px / 1920×1080.
Las fórmulas de conversión
Cada conversión pasa por píxeles usando las proporciones fijas de CSS: rem = px ÷ tamaño-de-fuente-raíz (16 por defecto) — así que px = rem × 16. em = px ÷ tamaño-de-fuente-del-padre (16 por defecto). pt = px × 0,75, porque 1px = 1/96 de pulgada y 1pt = 1/72 de pulgada, lo que da 1pt = 96/72 px = 1,3333px y 1px = 0,75pt. % = px ÷ tamaño-de-fuente-del-padre × 100 (porcentaje de font-size, donde 100% = el tamaño de fuente del padre, idéntico a 1em). vw = px ÷ ancho-del-viewport × 100, y vh = px ÷ alto-del-viewport × 100. Con los valores por defecto esto significa 16px = 1rem = 1em = 100% = 12pt = 0,8333vw = 1,4815vh. Si una base como el tamaño de fuente raíz se establece en 0, la unidad correspondiente queda indefinida y se muestra como «—» en lugar de infinito.
Preguntas frecuentes
¿Cuántos px es 1rem?
Por defecto 1rem = 16px, porque rem es relativo al tamaño de fuente raíz (<html>) y los navegadores lo establecen en 16px de fábrica. Así que 1,5rem = 24px y 2rem = 32px. Si cambias el tamaño de fuente raíz —por ejemplo a 10px para simplificar las cuentas— entonces 1rem equivale a ese valor (16px pasarían a ser 1,6rem). Define tu propio tamaño de fuente raíz en el panel avanzado y el conversor recalcula al instante.
¿Cuál es la fórmula de px a rem?
rem = px ÷ tamaño-de-fuente-raíz, y a la inversa px = rem × tamaño-de-fuente-raíz. Con la raíz por defecto de 16px eso significa dividir un valor en píxeles entre 16 para obtener rem: 24px ÷ 16 = 1,5rem, 10px ÷ 16 = 0,625rem. Se prefiere rem sobre px para tamaños de fuente y espaciado porque respeta la configuración de tamaño de fuente del navegador del usuario, lo cual es mejor para la accesibilidad.
¿Cuál es el tamaño de fuente raíz por defecto?
El tamaño de fuente raíz por defecto en todos los navegadores principales es 16px, aplicado al elemento <html>. Es la base para rem, así que 1rem = 16px a menos que tú (o una hoja de estilos) lo sobrescribas. Este conversor usa 16px como valor por defecto tanto para el tamaño de fuente raíz como para el del padre; puedes cambiar cualquiera de ellos en el panel avanzado para que coincida con tu proyecto.
¿Cuál es la diferencia entre px y pt?
px (píxel) es la unidad estándar para pantallas y se define en CSS como 1/96 de pulgada. pt (punto) es la unidad tradicional de impresión/tipografía, igual a 1/72 de pulgada. Eso hace que la proporción sea fija: 1pt = 96/72 px ≈ 1,3333px, y 1px = 0,75pt. Así que 12pt = 16px, por lo que un documento impreso de 12pt y un título en pantalla de 16px se ven del mismo tamaño. Usa px (o rem) para la web y reserva pt para las hojas de estilo de impresión.
Herramientas relacionadas
Sigue construyendo con UnitConv. Convierte colores entre HEX, RGB y HSL con el conversor de color, genera gradientes CSS, comprueba relaciones de contraste WCAG, calcula relaciones de aspecto y explora unidades de longitud más allá de la web en el conversor de unidades principal.