6XC

Convertidor PX ↔ REM ↔ EM ↔ PT

Convierte unidades CSS en ambos sentidos con un tamaño raíz configurable — px, rem, em y pt se actualizan juntos.

825 visitas

Cómo Funciona

rem = px ÷ tamaño raíz (16px por defecto, así que 24px = 1,5rem); em funciona igual pero respecto al tamaño de fuente heredado del propio elemento — el campo "tamaño de contexto" del convertidor; pt es la unidad de impresión, donde 1pt = 1,333px (96dpi ÷ 72). Escribe en cualquier campo y el resto sigue automáticamente.

Ejemplo práctico: sobre una base de 16px, un encabezado de 1,25rem se renderiza a 20px. Anida una etiqueta de 0,875em dentro de un componente cuyo propio tamaño de fuente es 1,125rem (18px), y se renderiza a 15,75px — porque em se compone respecto a su padre inmediato, no a la raíz.

Lo Que Hay Que Saber

  • rem es relativo al elemento raíz, no a un valor fijo del navegador. La suposición de 16px solo se cumple si nadie la ha cambiado. Si un usuario aumenta el tamaño de fuente predeterminado de su navegador en la configuración de accesibilidad — algo habitual entre personas con baja visión — cada valor basado en rem escala proporcionalmente con él. Los valores en píxeles no: un párrafo de 16px sigue siendo 16px sin importar la preferencia del navegador del usuario.
  • Por eso las guías de accesibilidad recomiendan rem para el tamaño de fuente y el espaciado. Un diseño construido en rem respeta de principio a fin el tamaño de texto elegido por el usuario — encabezados, cuerpo de texto y el espaciado a su alrededor crecen todos juntos, manteniendo el diseño proporcional en lugar de romperse cuando el texto se agranda.
  • em es relativo a su propia anidación, lo que se acumula. Un valor de 1,5em dentro de otro elemento de 1,5em se renderiza a 2,25× la raíz — útil para componentes que deben escalar con su propio contexto de tamaño de fuente (como el padding de un botón), arriesgado para cualquier cosa anidada varios niveles de profundidad.
  • El viejo "truco del 62,5%" — fijar la raíz en 10px para que 1rem = 10px, para facilitar el cálculo mental — sigue funcionando, pero conviene evitarlo en proyectos nuevos: la mayoría de las librerías de componentes asumen una raíz de 16px, y cambiarla puede producir tamaños inesperados en código de terceros.
  • pt se define en relación a px, no al revés. CSS fija la proporción en 1in = 96px = 72pt, así que 1pt = 96/72 = exactamente 1,333px. Esto importa sobre todo al exportar un diseño a impresión o PDF, donde pt es la unidad nativa — la conversión mantiene consistentes los tamaños en pantalla e impresos.

Preguntas Frecuentes

¿Por qué mi valor en em difiere del de rem?

em se multiplica por el tamaño de fuente definido más cercano, y se anida: un 1,5em dentro de un elemento de 1,5em equivale a 2,25× la raíz. rem siempre hace referencia a la raíz — esa previsibilidad es la razón de su éxito.

¿1pt es realmente 1,333px?

En CSS, sí por definición: 1in = 96px = 72pt. Los PDF de impresión y CSS coinciden en esta proporción, aunque el tamaño físico real depende del DPI real de la pantalla.

¿Por qué las guías de accesibilidad recomiendan rem sobre px para el texto?

Porque rem escala con la preferencia de tamaño de fuente del usuario y px no. Alguien que aumenta el tamaño de texto predeterminado de su navegador — una adaptación común para baja visión — ve crecer proporcionalmente cada tamaño de fuente y espaciado basado en rem, mientras que el texto basado en píxeles se queda fijo en su tamaño original, que es exactamente el fallo que señalan las auditorías de accesibilidad.

¿Qué ocurre con los valores en rem si un usuario cambia el tamaño de fuente predeterminado de su navegador?

Escalan automáticamente. Si el tamaño de fuente raíz se deja en el valor predeterminado del navegador y un usuario lo fija, digamos, en 20px en lugar de 16px, cada 1rem de tu CSS ahora equivale a 20px en lugar de 16px — sin necesidad de cambiar código. Esto solo funciona si el tamaño de fuente raíz en sí se deja sin definir o se expresa de forma relativa, no fijado en px.

¿Debería usar px alguna vez?

Sí, para cosas que genuinamente nunca deben escalar con el texto: bordes de un píxel, iconos de tamaño fijo o sombras de 1px. La regla práctica que usan la mayoría de los equipos es: rem para el tamaño de fuente y el espaciado del diseño, em para el padding relativo al componente, y px solo para detalles que deban mantenerse visualmente constantes sin importar la configuración de tamaño de texto del usuario.

Comentarios

Aún no hay comentarios — ¡sé el primero en escribir uno!

Herramientas Similares

Conversor de Divisas (Tasas del BCE en Vivo) Convierte entre más de 30 divisas — USD, EUR, GBP, TRY y más — usando las tasas de referencia diarias del Banco Central Europeo. Gratis, sin registro. Convertir Convertidor de Libras a Kilogramos Convierte libras a kilogramos y kilogramos a libras al instante — escribe en cualquiera de los dos campos. 1 lb = 0,4536 kg. Convertir Conversor de Pies y Pulgadas a Cm Convierte pies y pulgadas a centímetros y viceversa — conversiones de altura como 5'9" a cm, al instante. Convertir Conversor de Fahrenheit a Celsius Convierte °F a °C y Celsius a Fahrenheit al instante — temperaturas del clima, del horno y corporales con puntos de referencia habituales. Convertir