¿Qué es Convertidor de unidades tipográficas?
El convertidor de unidades tipográficas convierte entre píxeles (px), em, rem, puntos (pt), porcentajes (%) y unidades de viewport (vw, vh). Establece un tamaño de fuente base y un tamaño de viewport, y escribe un valor en cualquier campo para ver las demás unidades actualizarse de inmediato.
Las conversiones siguen el estándar CSS: 1pt = 96/72 px, em y rem multiplican por el tamaño de fuente base, el porcentaje toma la base como 100%, y vw y vh son fracciones del ancho y alto del viewport. Edita cualquier campo y los otros seis se recalculan al instante. El tamaño base por defecto es 16px (la raíz habitual), pero puedes cambiarlo a 14, 18 o cualquier raíz que use tu design system, y el viewport por defecto es 1920×1080 para que vw y vh sigan siendo exactas.
Cómo usar
- Paso 1 — Establece el tamaño de fuente base en píxeles (por defecto 16px), que determina cómo se calculan las unidades relativas como em, rem y %.
- Paso 2 — Introduce un valor numérico en cualquiera de los siete campos de unidad (px, em, rem, pt, %, vw o vh) para ver cómo se actualizan al instante todas las demás unidades.
- Paso 3 — Copia cualquier valor convertido para usarlo en tu CSS, especificaciones de diseño o maquetaciones de impresión.
Cuándo usar
- Traducir las especificaciones en pt de un diseñador de imprenta a los píxeles CSS que una hoja de estilos aplica realmente.
- Auditar un design system para comprobar si un heading de 1.25rem da realmente 20px con el root elegido.
- Elegir el valor em o % correcto dentro de un padre que ya cambia el tamaño de fuente heredado.
Resultado
Un diseñador te entrega las especificaciones en puntos (14pt para el texto del cuerpo). Introduce 14 en el campo pt con una base de 16px para ver al instante que equivale a 18.67px, 1.167em, 1.167rem y 116.7% — listo para usar en tu hoja de estilos.
Preguntas frecuentes
- ¿Por qué 1pt convierte a 1.333px en vez de 1px?
- CSS define 1pt como exactamente 1/72 de pulgada y 1in como 96px, así que 1pt = 96/72 = 1.333px. Esa es la conversión que usa cada navegador. Los tamaños en pt se ven más grandes en pantalla que el número, por este factor 4/3.
- ¿Cuál es la diferencia entre em y rem?
- rem siempre se refiere al tamaño del root (el elemento <html>). em se refiere al tamaño del padre más cercano. Así, 2em dentro de un padre de 20px son 40px, pero 2rem siguen siendo 2 × root sin importar el padre anidado.
- ¿Cómo afecta el tamaño base a las conversiones?
- Cambia el valor en px de 1rem y 1em. El 16px por defecto coincide con casi todos los navegadores, así que 1rem = 16px. Si tu root es 18px, 1rem = 18px y un heading de 1.25rem pasa a 22.5px en vez de 20px. La conversión de pt no cambia, es absoluta.
- ¿Debo usar px, rem o em en mi hoja de estilos?
- rem para tamaños de fuente (para que el usuario pueda ajustar vía zoom o accesibilidad), px para bordes y espaciados pequeños donde la exactitud importa, y em para espaciados relativos al tamaño del elemento actual (como el padding interno de un botón).
- ¿Por qué el porcentaje no marca 100% cuando px equivale a la base?
- Sí lo marca, pruébalo. Si px iguala tu base (p. ej. 16 con base 16) el campo % muestra 100. Si ves otra cifra, el px no coincide exactamente con la base, quizá por redondeo en otro campo, o porque cambiaste la base después de teclear el px.
Herramientas relacionadas
Convertidor de unidades de tiempo
Convierte unidades de tiempo al instante
Convertidor de marca de tiempo
Convierte marcas de tiempo Unix a fechas
Convertidor de par motor
Convierte entre unidades de par motor
Convertidor de ángulos
Convierte grados, radianes, gradianes, vueltas, minutos y segundos de arco, y notación DMS
Conversor de area
Convierte unidades de area al instante
Conversor de Tallas de Ropa
Convierte tallas de ropa entre US, UK, EU, AU, JP y CN — por etiqueta o por medidas corporales, con Francia, Italia y Corea a un clic