Conversor de Unidades CSS - Herramienta online gratuita

Características

Tamaño de fuente raíz configurable

px ↔ rem ↔ em ↔ pt

Genera el fragmento de CSS listo para usar

Cómo Usar

1. Establece el tamaño de fuente raíz (por defecto 16px).

2. Escribe un valor en cualquier campo de unidad.

3. Todas las demás unidades se actualizan automáticamente.

Sobre esta herramienta

Los píxeles son fáciles de entender, pero las unidades rem se adaptan al tamaño de fuente preferido por el usuario, lo que importa para la accesibilidad. Este conversor mantiene sincronizados px, rem, em y pt a partir del tamaño de fuente raíz que elijas: 16px por defecto, el estándar de los navegadores. Escribe un valor en cualquier campo y los demás se actualizan, así puedes pasar a rem un diseño entregado en píxeles o comprobar a qué equivale en pantalla un tamaño de impresión de 12pt. La conversión supone que em se mide respecto al mismo tamaño base que rem, lo cual es cierto para elementos cuyo padre usa el tamaño de fuente raíz; los componentes anidados con su propio tamaño de fuente darán otros valores.

Preguntas Frecuentes

¿Qué diferencia hay entre rem y em?

rem es relativo al tamaño de fuente del elemento raíz, así que 1rem vale lo mismo en toda la página. em es relativo al tamaño de fuente del padre del elemento actual, así que se acumula en elementos anidados. Este conversor trata em como relativo al tamaño raíz que introduces.

¿Por qué usar rem en lugar de px para los tamaños de fuente?

Si un visitante aumenta el tamaño de fuente predeterminado en la configuración de su navegador, el texto en rem crece con él, mientras que el texto en px ignora esa preferencia. Usar rem para tipografía y espaciado hace un sitio más cómodo para personas con baja visión.

¿Cómo se convierten los puntos a píxeles?

CSS define 1 pulgada como 96px y 72pt, así que 1pt equivale a 4/3 px (unos 1,333px). Una fuente de 12pt equivale, por tanto, a 16px.

¿Debo cambiar el tamaño de fuente raíz a 62.5%?

Poner html { font-size: 62.5% } hace que 1rem equivalga a 10px, lo que simplifica las cuentas pero reduce el texto por defecto y obliga a compensarlo en todas partes. Muchos equipos mantienen hoy los 16px por defecto y usan un conversor como este.

¿1px de CSS equivale a un píxel físico de la pantalla?

No en pantallas de alta densidad. Un píxel CSS es una unidad de referencia; en un dispositivo con una relación de píxeles de 2, cada píxel CSS se dibuja con dos píxeles físicos en cada dirección.