Conversor de Unidades CSS
Convierte entre px, rem, em y pt. Personaliza el tamaño de fuente base.
Puntos (pt):12pt
Tamaño de fuente del elemento <html> de tu sitio (el valor por defecto del navegador es 16px)
rem es relativo al tamaño de fuente del elemento raíz (<html>). El valor por defecto del navegador es 16px, por lo que 1rem = 16px a menos que se cambie.
1pt = 1,333px a 96 DPI (resolución de pantalla). Los puntos se usan principalmente en CSS de impresión y herramientas de diseño.
Tamaños CSS comunes
| px | rem | pt | Uso típico |
|---|---|---|---|
| 8 | 0.5 | 6 | Icono / border-radius |
| 10 | 0.625 | 7.5 | Código, texto pequeño |
| 12 | 0.75 | 9 | Texto pequeño / sugerencia |
| 14 | 0.875 | 10.5 | Cuerpo de texto (compacto) |
| 16 | 1 | 12 | Cuerpo de texto por defecto |
| 18 | 1.125 | 13.5 | Cuerpo de texto (cómodo) |
| 20 | 1.25 | 15 | Texto grande / subtítulo |
| 24 | 1.5 | 18 | H3 / encabezado grande |
| 32 | 2 | 24 | H2 / encabezado display |
| 48 | 3 | 36 | H1 / encabezado principal |
Preguntas frecuentes
px (píxeles) es una unidad absoluta que siempre se renderiza del mismo tamaño independientemente de la configuración del usuario. rem (root em) es relativo al tamaño de fuente del elemento <html> — con 16px por defecto: 1rem = 16px, 2rem = 32px. em es relativo al tamaño de fuente del elemento padre. rem se prefiere para diseños escalables: si un usuario establece su navegador a 20px para accesibilidad, todos los valores rem escalan proporcionalmente.
Divide el valor en píxeles por tu tamaño de fuente raíz. Con el estándar de 16px: rem = px ÷ 16. Por ejemplo: 24px ÷ 16 = 1,5rem, 32px ÷ 16 = 2rem, 14px ÷ 16 = 0,875rem. Muchos desarrolladores usan html { font-size: 62,5%; } para que 1rem = 10px, simplificando los cálculos.
Con el tamaño de fuente base por defecto de 16px: 16px = 1rem. Valores clave: 8px = 0,5rem, 12px = 0,75rem, 24px = 1,5rem, 32px = 2rem, 48px = 3rem. Si tu sitio usa una base diferente (p. ej. 10px), recalcula en consecuencia — por eso este conversor tiene una configuración de tamaño de fuente base.
rem respeta la preferencia de tamaño de fuente del navegador del usuario, lo cual es importante para la accesibilidad. Los usuarios con problemas de visión pueden aumentar el tamaño de fuente base del navegador, y todos los tamaños rem se escalan automáticamente. Los valores px ignoran esta configuración. rem también facilita el diseño responsive: ajusta el tamaño de fuente raíz con una media query y todos los elementos rem escalan proporcionalmente.