Conversor de PX a REM

Cómo usar el conversor de PX a REM

1. Indica el Tamaño de fuente raíz (px). Es 16 en todos los navegadores principales, salvo que tu hoja de estilos lo cambie. Los botones bajo el campo cambian a 16 px, 10 px (el truco de html { font-size: 62.5%; }) o 18 px.
2. Si trabajas con em, indica el Tamaño de fuente del padre para em (px): el tamaño de fuente calculado del elemento que contiene al que estás maquetando.
3. En Convertir un valor, escribe en Píxeles (px), REM o EM. Los otros dos campos se actualizan mientras escribes, y la línea de debajo muestra la división utilizada.
4. La Tabla de conversión masiva enumera tamaños habituales. Sustituye los Valores en píxeles por tus propios tokens de diseño (escala de espaciado, escala tipográfica…) y usa Copiar tabla para pegar el resultado en una hoja de cálculo o un documento de diseño.
5. Para migrar código existente, pégalo en CSS que convertir, elige las opciones y pulsa Convertir px a rem. Cargar un ejemplo muestra una pequeña hoja de estilos. Copia el CSS convertido con Copiar.

Las fórmulas

• rem = px ÷ tamaño de fuente raíz. Con los 16 px por defecto, 24px = 24 ÷ 16 = 1.5rem.
• em = px ÷ tamaño de fuente del padre. Dentro de un título de 20 px, 10px = 0.5em.
• px = rem × tamaño de fuente raíz, y px = em × tamaño de fuente del padre.

rem o em: ¿cuál usar?

rem («root em») se refiere siempre al tamaño de fuente del elemento html, así que 1.5rem significa lo mismo en toda la página. Es la opción más segura para tamaños de letra, espaciados, anchos máximos y separaciones del diseño.

em se refiere al tamaño de fuente del propio elemento (en el caso de font-size, al del padre). Se acumula: una lista a 0.9em anidada tres veces acaba en 0,9 × 0,9 × 0,9 = 73 % de la base. Eso hace que em sea útil para lo que debe escalar con su propio texto (el padding de un botón, el tamaño de un icono junto a una etiqueta) y arriesgado para la tipografía global.

Por qué rem es importante para la accesibilidad

Mucha gente aumenta el tamaño de letra predeterminado en los ajustes del navegador (por ejemplo, de 16 a 20 o 24 px) en lugar de hacer zoom en cada página. Los tamaños escritos en px ignoran esa preferencia; los tamaños en rem o em la respetan. Usar rem para el texto y los espaciados permite que todo el diseño crezca con la elección del lector, lo que ayuda a cumplir el criterio de conformidad 1.4.4 de WCAG 2.2 (cambiar el tamaño del texto hasta el 200 %).

Por el mismo motivo, evita fijar html { font-size: 16px; } en px: usa un porcentaje (100%, o 62.5% si quieres que 1rem = 10px) para que el ajuste del usuario se siga aplicando.

Qué cambia el conversor de CSS

Sustituye los números seguidos de px en las declaraciones por el valor dividido entre el tamaño de fuente raíz. Nunca toca los comentarios, las cadenas ni los valores url().

• Mantener en px los grosores de border y outline: border, border-*-width, outline, outline-offset y column-rule se quedan en px, para que las líneas finas sigan nítidas. border-radius sí se convierte.
• Mantener los valores de 1px: cualquier valor entre −1px y 1px se queda como está.
• Convertir las media queries a em (base de 16px): en las condiciones @media, rem y em se refieren siempre al tamaño de fuente inicial del navegador, nunca a tu regla html, así que la herramienta divide entre 16 y escribe em, sea cual sea tu tamaño raíz. Si la desmarcas, las media queries conservan sus px.