Convertidor de unidades CSS
Convierte un valor entre px, rem, em, pt, vw y vh con el tamaño de fuente y de ventana que indiques. Pensado para maquetar en CSS.
Prueba otra herramienta
Elegidas para acompañar a estaEste convertidor pasa un valor de CSS entre las unidades absolutas, px y pt, y las relativas, rem, em, vw y vh. Escribes el valor, eliges su unidad y ves todas las equivalencias a la vez. Las unidades relativas dependen del contexto, así que indicas el tamaño de fuente raíz (para rem), el del elemento (para em) y el ancho y el alto de la ventana (para vw y vh). Por defecto usa 16 px, el tamaño de fuente base de los navegadores.
Cómo usar esta herramienta
- 01Escribe el valorEl número que quieres convertir, por ejemplo 24.
- 02Elige su unidadpx, rem, em, pt, vw o vh. Las demás equivalencias aparecen al momento.
- 03Ajusta el contextoCambia la fuente raíz, la del elemento o el tamaño de la ventana si tu diseño no usa los valores por defecto.
¿Cuándo es útil?
- Pasar un diseño a CSSTraducir las medidas en px de una maqueta a rem para una tipografía escalable.
- Hojas de estilo para imprimirConvertir entre pt y px al preparar estilos de impresión.
- Diseño adaptableSaber cuántos píxeles ocupa un tamaño en vw o vh en una pantalla concreta.
Ejemplos
- 24 px a remCon la fuente raíz en 16 px, 24 px son 24 ÷ 16 = 1,5 rem. En una ventana de 1920 px de ancho equivalen a 1,25 vw.
- 1,5 rem con otra fuente raízSi el html tiene 20 px, 1,5 rem son 30 px; con 16 px serían 24 px.
- 12 pt a pxComo 1 px equivale a 0,75 pt, 12 pt son 12 ÷ 0,75 = 16 px.
- 10 vw en un portátilEn una ventana de 1366 px de ancho, 10 vw son 136,6 px.
Consejos para un mejor resultado
- Fija la fuente raízSi tu CSS cambia el tamaño de fuente del html, escribe ese valor para que los rem salgan bien.
- Cuidado con em anidadosUn em dentro de otro em multiplica los tamaños; con rem eso no pasa.
Cómo se convierte cada unidad
Todo pasa por píxeles. 1 rem vale el tamaño de fuente raíz (16 px por defecto) y 1 em el tamaño de fuente del elemento. 1 px equivale a 0,75 pt, porque en CSS una pulgada son 96 px y 72 pt. 1 vw es el 1% del ancho de la ventana y 1 vh el 1% de su alto.
rem o em: cuál usar
rem se mide siempre contra la fuente del html, así que es predecible en toda la página. em se mide contra la fuente del propio elemento, que hereda la del padre, y se acumula al anidar. Por eso rem es lo habitual para tipografía y espaciados, y em para componentes que deben escalar con su propio texto.
Accesibilidad y tamaño de fuente
Definir tamaños en rem respeta la fuente que cada persona elige en su navegador: si la sube de 16 a 20 px, todo lo que está en rem crece en proporción, mientras que lo definido en px se queda fijo.
Preguntas frecuentes
¿Cuántos px son 1 rem?
16 px con el tamaño de fuente predeterminado de los navegadores. Si el html tiene otro tamaño, 1 rem vale ese tamaño.
¿Cómo paso de px a rem?
Divide los píxeles entre el tamaño de fuente raíz: 24 px ÷ 16 = 1,5 rem.
¿Qué diferencia hay entre pt y px?
En CSS, 1 pt es 1/72 de pulgada y 1 px es 1/96, así que 1 px equivale a 0,75 pt y 12 pt a 16 px. Los pt se usan sobre todo para imprimir.
¿Para qué sirven vw y vh?
Para medidas que dependen de la ventana: 100vw es todo el ancho y 100vh todo el alto. Son útiles en secciones a pantalla completa y en tipografía fluida.
¿Se guardan mis valores?
No. La conversión se hace en tu navegador y no se envía nada.