Softonic

Convertidor de EM a REM

Paso 1 / 2 rem
Resultados

Un diseñador te envía especificaciones de Figma en píxeles, la base de código usa rem, y la mitad de los componentes anidan em en lugares donde cambian según el tamaño de fuente del padre. Este convertidor calcula los equivalentes en px y rem de cualquier valor em a cualquier tamaño de fuente raíz, para que puedas copiar el número correcto en el archivo CSS sin recalcular en tu cabeza cada vez.

Cómo convertir em, rem y píxeles

  1. 1

    Establecer el tamaño de fuente base

    Generalmente 16px, el valor predeterminado del navegador. Algunos sistemas de diseño utilizan 14px o 18px como raíz.

  2. 2

    Para em, establecer el tamaño de fuente del padre

    em es relativo al elemento padre. Si el padre es 20px, 1em equivale a 20px.

  3. 3

    Ingresa un valor

    En em; los equivalentes en px y rem se actualizan automáticamente.

  4. 4

    Lee la conversión

    Valores de px, em y rem con decimales redondeados y exactos mostrados.

Las fórmulas

rem siempre es relativo al elemento raíz (<html>):

px = rem * root_font_size rem = px / root_font_size

em es relativo al padre del elemento actual:

px = em * parent_font_size em = px / parent_font_size

Conversiones a 16px raíz

Píxeles rem em (en padre de 16px)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

Cuándo usar cada uno

  • px: bordes, detalles finos, control exacto. Sombra de caja de 1px, borde de 1px.
  • rem: márgenes, relleno, tipografía que debe escalar con la preferencia de fuente del usuario.
  • em: espaciado local del componente que se adapta a su propio tamaño de fuente (botones, insignias).
  • % y vw/vh: relativo al contenedor y al viewport, conversación separada.

El truco del 62.5%

Algunas bases de código establecen html { font-size: 62.5%; } lo que hace que 1rem = 10px. Eso facilita los cálculos de rem (24px = 2.4rem) a costa de romper las preferencias de tamaño de fuente del navegador para los usuarios que amplían el texto. La práctica moderna evita este truco; usa 16px como raíz y tolera decimales.

Trampa de herencia em

em hereda a través de la cascada. Si un padre tiene un tamaño de fuente de 1.2em relativo a su propio padre, y dentro de él tienes un relleno de 1em, el relleno es 1.2 * 1.2 = 1.44 * raíz. Los em anidados se acumulan, lo que puede producir resultados sorprendentes. Rem evita esto porque siempre se resuelve contra <html>.

Ejemplo de escala tipográfica

Una escala de tipo modular común con una relación de 1.25:

Nivel rem px (en raíz de 16)
Leyenda 0.75 12
Cuerpo 1 16
Cuerpo+ 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
Destacado 3.052 ~49

Usar rem significa que cada nivel escala proporcionalmente si un usuario aumenta el tamaño de fuente de su navegador por accesibilidad.

Respetando las preferencias del usuario

Codificar px en toda una hoja de estilo rompe a los usuarios que amplían el texto por razones de visión. rem respeta esas preferencias porque se resuelve contra el tamaño raíz, que el usuario puede cambiar. Esta es la razón principal por la que las guías de estilo recomiendan rem para tipografía y espaciado.

Preguntas frecuentes

Usa rem para tipografía, espaciado y tamaño de diseño. Usa em para el tamaño interno del componente que debe escalar con el tamaño de fuente del propio componente (botones, íconos dentro del texto). Usa px solo para detalles finos que no deben escalar.

Los usuarios pueden cambiar el tamaño de fuente predeterminado de su navegador. Chrome tiene un valor predeterminado de 16px; si el usuario establece 18px, todos tus rem son un 12.5 por ciento más grandes. Los diseñadores que asumen una raíz fija de 16px a menudo pasan por alto esto; rem respeta la elección, que es el punto.

La escala de espaciado de Tailwind utiliza rem. text-base es 1rem = 16px por defecto, text-lg es 1.125rem. La escala es consistente y respeta el tamaño de fuente raíz desde el principio.

No. Los números que introduces solo se usan para calcular la conversión y no se guarda nada.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Herramienta disponible en otros idiomas