Conversor de Unidades CSS
Convierte entre px, rem, em, vw, vh y más unidades CSS, en tu navegador.
Haz clic en cualquier valor para copiar
Por qué usarlo
Diseño responsivo sin calcular a mano
Todas las unidades CSS
px, rem, em, %, vw, vh, pt y más. Conversión instantánea entre cualquier par.
Base configurable
Ajusta el tamaño de fuente base para calcular rem/em precisos según tu proyecto.
Instantáneo
Resultados en tiempo real al escribir. Sin botones, sin esperas.
Sin registro
Herramienta de uso diario disponible al instante, sin cuentas ni instalaciones.
Cómo funciona
Tres pasos, sin complicaciones
Introduce el valor
Escribe el valor numérico y selecciona la unidad de origen (por ejemplo, 24px). Ajusta el tamaño base de fuente si es diferente a 16px.
Obtén todos los equivalentes
El conversor calcula al instante el equivalente en rem, em, %, vw, pt y otras unidades CSS de uso común.
Usa el valor en tu CSS
Copia el valor que necesitas directamente en tu hoja de estilos. Sin cálculos manuales ni errores.
Preguntas frecuentes
¿Tienes dudas?
Usa px para valores que no deben escalar con las preferencias del usuario: bordes finos (1px), sombras, posiciones absolutas. Usa rem para tamaños de fuente y espaciados que sí deben respetar las preferencias de accesibilidad del usuario: si el usuario aumenta el tamaño de fuente base en su navegador (la mayoría de lectores de pantalla y usuarios con baja visión hacen esto), los valores en rem escalan automáticamente. Usa em para valores relativos al tamaño de fuente del elemento padre: útil en componentes que deben mantener sus proporciones internas independientemente del contexto.
16px como tamaño de fuente base fue establecido por los navegadores web a finales de los años 90, derivado de la resolución típica de monitores de la época (72-96 DPI) y de estándares de legibilidad de texto para lectura en pantalla. Equivale aproximadamente a 12 puntos tipográficos (12pt), el tamaño estándar para texto corrido en documentos impresos desde la era de la imprenta de Gutenberg. La W3C lo adopta como valor inicial para la propiedad font-size.
La especificación WCAG 1.4.4 (Resize Text) requiere que el texto pueda aumentarse hasta un 200% sin pérdida de contenido ni funcionalidad. Si usas px para tamaños de fuente, el texto no escala cuando el usuario cambia el tamaño base en la configuración del navegador (Configuración > Apariencia > Tamaño de fuente en Chrome/Firefox). Si usas rem, el texto escala automáticamente. Esta es la razón por la que las guías de accesibilidad recomiendan rem para font-size y line-height, pero aceptan px para bordes y decoraciones.
vw (viewport width) y vh (viewport height) son porcentajes del tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana. Para tipografía fluida, se usa la función CSS clamp(): font-size: clamp(1rem, 2.5vw, 2rem) define un tamaño mínimo (1rem), un tamaño preferido que escala con el viewport (2.5vw) y un máximo (2rem). Esto produce texto que aumenta suavemente con el tamaño de la pantalla sin saltos bruscos, eliminando la necesidad de media queries para tipografía.
CSS tiene unidades físicas absolutas: cm, mm, in, pt y pc. El problema es que en pantallas, estas unidades no corresponden a sus medidas físicas reales. En pantallas de alta densidad (Retina, 4K), 1cm en CSS puede medir 0.8cm o 1.2cm físicos dependiendo del dispositivo y del DPI declarado. Solo en medios impresos (print media queries) los cm y mm se corresponden exactamente con la medida física. Por eso los diseñadores web usan px, rem, em y unidades relativas, reservando las unidades absolutas para estilos de impresión.
Unidades CSS: especificación, historia y el truco del 62.5%
La especificación CSS Units and Values (CSS Values Level 3) fue publicada por el W3C en 2015 y estandarizó las unidades de viewport (vw, vh, vmin, vmax) que los navegadores habían empezado a implementar experimentalmente desde 2012. Las unidades de viewport resuelven un problema fundamental del diseño responsivo: crear layouts y tipografías que se adaptan al tamaño de la pantalla sin media queries. CSS Values Level 4 (en estado de borrador avanzado) introduce las unidades de container query (cqw, cqh, cqi, cqb, cqmin, cqmax), que son porcentajes del contenedor CSS más cercano en lugar del viewport, habilitadas en todos los navegadores principales desde finales de 2022.
El truco del 62.5% es una técnica histórica para facilitar el uso de rem: estableciendo font-size: 62.5% en el elemento html (que equivale a 10px asumiendo el base de 16px), los cálculos de rem se vuelven triviales (1.6rem = 16px, 2.4rem = 24px). Fue popularizado por Jonathan Snook alrededor de 2011 en el contexto del crecimiento del diseño responsivo. Sin embargo, esta técnica tiene un problema de accesibilidad: si un usuario tiene configurado un tamaño de fuente base diferente a 16px en su navegador, el 62.5% lo ajusta incorrectamente, rompiendo el escalado. Por eso las guías modernas de accesibilidad desaconsejan esta técnica en favor de dejar el font-size del html sin modificar y usar rem directamente.
CSS Values Level 4 también introduce las unidades lógicas relativas a la tipografía: cap (altura de las mayúsculas), ch (anchura del glifo 0), ic (anchura del glifo 水 CJK), lh (line-height del elemento), rlh (line-height del root), ex (altura de la x minúscula). Estas unidades permiten crear espaciados perfectamente proporcionados a la tipografía sin depender de valores numéricos fijos. La unidad ch es especialmente útil para establecer el ancho máximo de columnas de texto (max-width: 65ch es una medida de legibilidad óptima según investigación tipográfica, equivalente aproximadamente a 65 caracteres por línea).