Convertidor de PX a REM a EM - Calculadora Gratuita de Unidades CSS

Convertidor de unidades PX, REM y EM

Un convertidor de px a rem y em cambia una longitud CSS entre píxeles (px), em raíz (rem) y em, usando un tamaño de fuente raíz y un tamaño de fuente del elemento padre que establece la persona. Estas tres unidades son las formas más comunes de dimensionar texto y espaciado en CSS, el lenguaje utilizado para dar estilo a las páginas web.

¿Qué son px, rem y em?

Un píxel (px) es una unidad fija. Una caja con un ancho de 200px mantiene un ancho de 200px independientemente del tamaño de fuente que use la página.

Un rem («root em», o «em raíz») es una unidad que se escala con el tamaño de fuente del elemento raíz de la página, normalmente la etiqueta <html>. Los navegadores suelen fijar ese tamaño de fuente predeterminado en 16px, salvo que un sitio lo cambie. Si el tamaño de fuente de la raíz es de 16px, entonces 1rem equivale a 16px.

Un em es una unidad que se escala con el tamaño de fuente del elemento en el que se usa. Cuando em define la propia propiedad font-size, se mide respecto al tamaño de fuente heredado del elemento padre, el elemento que lo contiene. Si un elemento padre tiene font-size: 20px, entonces font-size: 1em dentro de ese padre equivale a 20px. El conversor usa este caso basado en el elemento padre.

La diferencia principal entre rem y em es la referencia con la que se mide cada uno. Rem siempre toma como referencia el elemento raíz. Em toma el tamaño de fuente propio del elemento o el heredado, por lo que su valor puede cambiar en cada nivel de anidamiento.

Cómo calcular de px a rem

Para convertir píxeles a rem, divide el valor en píxeles entre el tamaño de fuente raíz:

rem = px ÷ tamaño de fuente raíz

Ejemplo

Con el tamaño de fuente raíz predeterminado de 16px, 24px se convierte en:

24 ÷ 16 = 1,5rem

Si un sitio establece el tamaño de fuente raíz en 10px (un método habitual que consiste en establecer html { font-size: 62.5%; }, ya que 62,5 % de 16px equivale a 10px), los mismos 24px se convierten en:

24 ÷ 10 = 2,4rem

Cómo calcular de rem a px

Para hacer la conversión inversa, multiplica el valor en rem por el tamaño de fuente raíz:

px = rem × tamaño de fuente raíz

Con una raíz de 16px, 1.5rem se convierte de nuevo en 1,5 × 16 = 24px.

Cómo calcular de px a em

Para convertir píxeles a em, divide el valor en píxeles entre el tamaño de fuente del elemento padre:

em = px ÷ tamaño de fuente del elemento padre

Ejemplo

Si el tamaño de fuente del elemento padre es de 20px, entonces 24px se convierte en:

24 ÷ 20 = 1,2em

Cómo calcular de em a px

Multiplica el valor en em por el tamaño de fuente del elemento padre:

px = em × tamaño de fuente del elemento padre

Con un elemento padre de 20px, 1.2em se convierte de nuevo en 1,2 × 20 = 24px.

Cómo calcular de rem a em y de em a rem

Como rem y em toman como referencia tamaños de fuente distintos, para convertir entre ellas se necesitan tanto el tamaño de fuente raíz como el del elemento padre:

em = rem × (tamaño de fuente raíz ÷ tamaño de fuente del elemento padre)

rem = em × (tamaño de fuente del elemento padre ÷ tamaño de fuente raíz)

Ejemplo

Con un tamaño de fuente raíz de 16px y un tamaño de fuente del elemento padre de 20px, 2rem se convierte en:

2 × (16 ÷ 20) = 1,6em

Si los tamaños de fuente raíz y del elemento padre son iguales, 1rem siempre equivale a 1em.

Cuándo es útil cada unidad

Los píxeles funcionan bien para detalles cuyo tamaño no debe cambiar, como un borde de 1px o un icono de ancho fijo.

Rem es habitual para el espaciado y la tipografía que deben mantener la coherencia en toda una página. Como siempre hace referencia al tamaño de fuente raíz, un valor en rem no cambia por muy profundamente anidado que esté un elemento. Esto también hace que los diseños basados en rem se ajusten automáticamente cuando una persona aumenta el tamaño de fuente predeterminado de su navegador, lo que ayuda a los lectores con baja visión.

Em funciona bien dentro de un componente único e independiente, como un botón, en el que el relleno debe escalar junto con el tamaño de fuente del propio botón. Un problema habitual de em es que se acumula: si varios elementos anidados usan font-size: 1.2em, cada nivel multiplica el anterior, por lo que los tamaños de fuente crecen más de lo previsto.

Después de tres niveles, el texto ha crecido aproximadamente un 73 %, no el 20 % que un desarrollador podría esperar de una sola regla 1.2em.

Uso del convertidor

1. Introduzca un valor en el campo de píxeles, rem o em.
2. Los otros dos campos se actualizan automáticamente.
3. Ajuste el tamaño de fuente de la raíz para que coincida con el del elemento <html> del proyecto (16px de forma predeterminada en la mayoría de los navegadores).
4. Ajuste el tamaño de fuente del padre para que coincida con el del elemento dentro del cual se usaría un valor en rem o em.
5. Use el botón de copia situado junto a un campo para copiar su valor.

La herramienta también muestra los tres valores uno junto a otro para poder comparar visualmente sus tamaños relativos.

Preguntas frecuentes

¿Cuál es la diferencia entre rem y em? Rem siempre se refiere al tamaño de fuente del elemento raíz. Em se refiere al tamaño de fuente del elemento en el que se usa, que en el caso de la propia propiedad font-size es el tamaño heredado del padre. Un valor en rem es el mismo en toda la página; un valor en em puede cambiar según la profundidad de anidamiento del elemento.

¿Por qué los navegadores usan 16px como tamaño de fuente predeterminado? 16px es el tamaño de texto predeterminado habitual en los principales navegadores, y los usuarios pueden cambiarlo en los ajustes del navegador. Las pautas de accesibilidad web piden que el texto pueda ampliarse hasta un 200 por ciento sin pérdida de contenido ni de funcionalidad. Definir el tamaño del texto en rem permite que una página respete el tamaño predeterminado que haya elegido el lector.

¿Qué es el truco de 62,5 %? Establecer html { font-size: 62.5%; } convierte el tamaño de fuente raíz predeterminado de 16 píxeles en 10 píxeles, ya que 62,5 % de 16 es 10. Esto simplifica los cálculos con rem, porque 1,6 rem equivale a 16 píxeles y 2,4 rem equivale a 24 píxeles.

¿Pueden ser negativos los valores en px, rem y em? Sí, en las propiedades que admiten longitudes negativas, como los márgenes o las transformaciones CSS. El relleno (padding) no puede ser negativo en CSS: los valores negativos de padding no son válidos, por lo que los navegadores los ignoran.

¿Debería convertirse a rem todo valor en píxeles? No necesariamente. Los bordes y otros detalles finos suelen mantenerse en píxeles, ya que rara vez necesitan escalarse con el tamaño de fuente y pueden verse irregulares con anchos inferiores a un píxel. Rem es adecuado para el espaciado y la tipografía que deben escalar con la preferencia de tamaño de fuente del usuario.

¿Afecta la elección de la unidad al rendimiento de la página? No. Los navegadores convierten todas las longitudes CSS al mismo valor interno durante la composición, por lo que px, rem y em se representan con la misma rapidez. La elección entre ellas afecta al mantenimiento y a la accesibilidad, no a la velocidad.

Referencias

1. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4. CSS Values and Units Level 4, longitudes relativas a la fuente — em equivale al tamaño de fuente calculado del elemento (el tamaño heredado cuando se usa en font-size); rem equivale a la unidad em del elemento raíz.
2. Mozilla. font-size, MDN Web Docs. MDN: font-size — si no hay un tamaño de fuente definido en los elementos ancestros, 1em equivale al valor predeterminado del navegador, normalmente 16px.
3. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.4: Resize Text. WCAG 2,1 Understanding 1.4.4 — el texto puede ampliarse hasta un 200 por ciento sin pérdida de contenido ni de funcionalidad.
4. World Wide Web Consortium (W3C). CSS Box Model Module Level 4. CSS Box Model Level 4 — los valores negativos de las propiedades de relleno (padding) no son válidos.