Convertidor de unidades tipográficas
Convierte entre px, rem, em, pt y vw con un tamaño base personalizable.
Valor a convertir
Resultados
| Unidad | Valor |
|---|---|
| px (píxeles) | 16 px |
| rem | 1 rem |
| em | 1 em |
| pt (puntos) | 12.003 pt |
| vw (ancho del viewport) | 0.8333 vw |
Fórmulas de conversión
- 1 rem = 16 px (tamaño base)
- 1 em = 16 px (tamaño base)
- 1 pt = 1,333 px
- 1 vw = 19.2 px (viewport: 1920px)
Tabla de referencia
Valores comunes (base: 16px, viewport: 1920px)
| px | rem | em | pt | vw |
|---|---|---|---|---|
| 12 | 0.75 | 0.75 | 9.0023 | 0.625 |
| 14 | 0.875 | 0.875 | 10.5026 | 0.7292 |
| 16 | 1 | 1 | 12.003 | 0.8333 |
| 18 | 1.125 | 1.125 | 13.5034 | 0.9375 |
| 20 | 1.25 | 1.25 | 15.0038 | 1.0417 |
| 24 | 1.5 | 1.5 | 18.0045 | 1.25 |
| 32 | 2 | 2 | 24.006 | 1.6667 |
| 48 | 3 | 3 | 36.009 | 2.5 |
| 64 | 4 | 4 | 48.012 | 3.3333 |
Convertidor de unidades tipográficas: px, rem, em, pt, vw
¿Por qué convertir entre unidades CSS?
Los navegadores modernos soportan más de 15 unidades de longitud CSS, pero las más comunes en tipografía web son px, rem, em, pt y vw. Convertir entre ellas manualmente requiere conocer el tamaño base (16 px por defecto) y el ancho del viewport. Esta herramienta realiza esos cálculos en tiempo real.
Usar unidades relativas (rem, em, vw) en lugar de píxeles fijos mejora la accesibilidad de tu sitio: los usuarios que aumentan el tamaño de texto en su navegador obtienen un escalado proporcional. Las WCAG 2.1 recomiendan unidades relativas para los tamaños de texto.
Todo el cálculo se realiza en tu navegador. No se envía ningún dato a un servidor. La tabla de referencia te ofrece las equivalencias de los 9 tamaños más comunes (12, 14, 16, 18, 20, 24, 32, 48, 64 px) de un vistazo.
¿Quién usa esta herramienta?
- Desarrolladores front-end
- Convierte rápidamente los valores px de un diseño en Figma o Sketch a rem para tu hoja de estilos CSS. Configura el tamaño base según tu proyecto (16 px por defecto) y obtén las equivalencias al instante.
- Diseñadores UI/UX
- Verifica las correspondencias entre los valores pt usados en tus archivos de diseño y los px o rem necesarios en el código. Facilita la comunicación con los desarrolladores mediante una tabla de referencia compartida.
- Estudiantes de CSS
- Comprende las relaciones entre unidades CSS experimentando con diferentes valores. Modifica el tamaño base y el ancho del viewport para ver cómo cambian las conversiones, y asimila las fórmulas de forma práctica.
- Especialistas en accesibilidad web
- Verifica que los tamaños de texto de tu proyecto cumplen las recomendaciones WCAG convirtiendo los valores px a rem. Simula diferentes tamaños base para anticipar el comportamiento en usuarios que ajustan su navegador.
¿Cómo usar el convertidor?
Introduce un valor numérico y selecciona su unidad de origen (px, rem, em, pt o vw). La herramienta convierte instantáneamente a las otras 4 unidades. Puedes ajustar el tamaño base (para rem/em) y el ancho del viewport (para vw).
La sección «Fórmulas de conversión» muestra las equivalencias exactas con tus parámetros actuales: 1 rem = X px, 1 pt = 1,333 px, 1 vw = Y px. Estas fórmulas se actualizan en tiempo real al modificar la base o el viewport.
La tabla de referencia presenta los 9 tamaños px más comunes (de 12 a 64 px) con sus equivalentes rem, em, pt y vw. Úsala como guía rápida durante la integración de tus maquetas.
Preguntas frecuentes
- ¿Cuál es la diferencia entre rem y em en CSS?
- rem (root em) es relativo al tamaño de fuente del elemento raíz (html), generalmente 16 px por defecto. em es relativo al tamaño de fuente del elemento padre. En la práctica, 1 rem = 16 px si la base no se ha modificado, mientras que 1 em varía según el contexto. Para mantener la coherencia, la mayoría de los frameworks CSS recomiendan rem para tamaños globales y em para espaciados internos.
- ¿Cómo convertir px a vw para diseño responsive?
- La fórmula es: vw = (px / ancho del viewport) × 100. Por ejemplo, para un viewport de 1920 px, 32 px = (32 / 1920) × 100 = 1,6667 vw. Esta herramienta realiza el cálculo automáticamente con el ancho de viewport que definas.
- ¿Por qué usar rem en lugar de px en CSS?
- Las unidades rem respetan las preferencias de tamaño de texto definidas por el usuario en su navegador. Si un usuario con discapacidad visual aumenta el tamaño base a 20 px, todos tus elementos en rem se escalan proporcionalmente. Los px son fijos e ignoran este ajuste, lo que genera problemas de accesibilidad.
- ¿Se envían mis datos a un servidor?
- No. Todas las conversiones se calculan localmente en tu navegador mediante JavaScript. Ningún dato se transmite ni se almacena en un servidor.