Convierte rem a píxeles con cualquier base
Con el valor predeterminado del navegador un rem son 16 píxeles, así que 1,5rem dan 24. Escribe el valor en rem, ajusta el tamaño de fuente base y lee el resultado: la base de 10 px de la técnica del 62,5% funciona igual.
¿Para qué convertir rem a píxeles?
El rem pasa a píxeles con una sola multiplicación: el valor en rem por el tamaño de fuente base. Con el valor predeterminado del navegador esa base es de 16 px, así que 1rem son 16 píxeles y 1,5rem son 24. La unidad se refiere al tamaño de texto del elemento html, la raíz del documento, de ahí su nombre, root em [1].
La conversión sirve al trabajar con una maqueta. El diseñador entrega medidas en píxeles, la hoja de estilos las guarda en rem y tú necesitas una cifra para comprobar si un titular de 1,875rem tiene de verdad los 30 píxeles del diseño.
La base no tiene por qué ser 16 px. La técnica del 62,5% la fija en 10 px, y quien lee puede subirla en los ajustes de su navegador, por eso el campo admite cualquier valor de 1 a 100.
Más abajo encontrarás una tabla con 26 valores a tres bases, la escala completa de tamaños de Tailwind CSS y la explicación de por qué la cifra 16 es solo predeterminada. El camino inverso lo cubre el convertidor de píxeles a rem.
¿Cómo calcular rem a píxeles a mano? Fórmula y ejemplo
La fórmula tiene una sola operación: píxeles = rem × tamaño de fuente base. El tamaño de fuente base es el que lleva el elemento html, y si nadie lo ha cambiado el navegador usa 16 px.
Ejemplo con un espaciado de 1,25rem: con base 16 px sale 1,25 × 16 = 20 píxeles. Ese mismo valor con base 10 px da 12,5 píxeles, y en quien haya puesto 20 px en el navegador crece hasta 25.
La técnica del 62,5% consiste en escribir html { font-size: 62.5% }, lo que deja la base en 10 px, porque el 62,5% de 16 es exactamente 10. El cálculo se hace entonces de cabeza: 2,4rem son 24 píxeles. Viene con una condición: al texto del body hay que devolverle un tamaño legible, normalmente 1.6rem, o toda la página queda compuesta en cuerpo diez.
La unidad em se calcula igual, solo que se refiere al elemento padre en lugar de a la raíz del documento: ese cálculo lo hace el convertidor de em a píxeles. Esos mismos 16 píxeles son 12 puntos tipográficos en composición, lo que resuelve el convertidor de puntos a píxeles.
¿Cuántos píxeles tienen los valores habituales en rem?
| Valor en rem | Base 16 px (predeterminada) | Base 10 px (62,5%) | Base 20 px (texto ampliado) |
|---|---|---|---|
| 0,25 rem | 4 px | 2,5 px | 5 px |
| 0,375 rem | 6 px | 3,75 px | 7,5 px |
| 0,5 rem | 8 px | 5 px | 10 px |
| 0,625 rem | 10 px | 6,25 px | 12,5 px |
| 0,75 rem | 12 px | 7,5 px | 15 px |
| 0,875 rem | 14 px | 8,75 px | 17,5 px |
| 1 rem | 16 px | 10 px | 20 px |
| 1,125 rem | 18 px | 11,25 px | 22,5 px |
| 1,25 rem | 20 px | 12,5 px | 25 px |
| 1,375 rem | 22 px | 13,75 px | 27,5 px |
| 1,5 rem | 24 px | 15 px | 30 px |
| 1,625 rem | 26 px | 16,25 px | 32,5 px |
| 1,75 rem | 28 px | 17,5 px | 35 px |
| 1,875 rem | 30 px | 18,75 px | 37,5 px |
| 2 rem | 32 px | 20 px | 40 px |
| 2,25 rem | 36 px | 22,5 px | 45 px |
| 2,5 rem | 40 px | 25 px | 50 px |
| 2,75 rem | 44 px | 27,5 px | 55 px |
| 3 rem | 48 px | 30 px | 60 px |
| 3,5 rem | 56 px | 35 px | 70 px |
| 3,75 rem | 60 px | 37,5 px | 75 px |
| 4 rem | 64 px | 40 px | 80 px |
| 4,5 rem | 72 px | 45 px | 90 px |
| 5 rem | 80 px | 50 px | 100 px |
| 6 rem | 96 px | 60 px | 120 px |
| 8 rem | 128 px | 80 px | 160 px |
Las tres bases cubren tres situaciones: 16 px es lo predeterminado del navegador, 10 px sale de la técnica del 62,5% y 20 px es una cifra típica en quien ha ampliado el texto en sus ajustes.
¿Por qué 16 px es solo un valor predeterminado?
La cifra 16 no viene de la especificación CSS. Es el tamaño de texto que el navegador da por defecto a un documento, y quien lee puede cambiarlo en los ajustes de su programa. Quien ve peor pone ahí 20 o 24 px y espera que la página le siga.
Ahí está toda la diferencia entre el rem y el píxel. Un elemento escrito como font-size: 24px se queda en 24 píxeles sea cual sea la elección de quien lee. Ese mismo elemento como 1.5rem crece con la base: con 20 px da 30 píxeles y con 24 px da 36.
El criterio WCAG 1.4.4 exige que el texto pueda ampliarse hasta el 200% sin perder contenido ni funcionalidad [2]. Una maquetación levantada sobre rem lo cumple sola, porque escala junto con el ajuste de quien lee.
En España ese criterio tiene rango normativo. El Real Decreto 1112/2018 traspone la directiva (UE) 2016/2102 y obliga a los sitios web y las aplicaciones móviles del sector público a cumplir la norma EN 301 549, equivalente a las WCAG 2.1 de nivel AA [3]. Una hoja de estilos ya escrita en rem cubre el criterio 1.4.4 antes de que empiece la auditoría.
De ahí el reparto práctico: tamaños de texto, espaciados y anchos de columna en rem, y el píxel donde una medida deba quedarse fija al margen del texto, como bordes, sombras y filetes.
¿De dónde salen valores como 0,875 o 1,875rem?
| Clase de Tailwind | Valor en rem | Píxeles con base 16 px | Dónde se usa |
|---|---|---|---|
| text-xs | 0,75 rem | 12 px | Pie de imagen, etiqueta pequeña |
| text-sm | 0,875 rem | 14 px | Texto de ayuda, etiqueta de campo |
| text-base | 1 rem | 16 px | Texto del párrafo, valor de referencia |
| text-lg | 1,125 rem | 18 px | Párrafo de entrada |
| text-xl | 1,25 rem | 20 px | Titular de tarjeta |
| text-2xl | 1,5 rem | 24 px | Titular de sección |
| text-3xl | 1,875 rem | 30 px | Subtítulo de página |
| text-4xl | 2,25 rem | 36 px | Título de página |
| text-5xl | 3 rem | 48 px | Titular de la portada |
| text-6xl | 3,75 rem | 60 px | Titular grande en escritorio |
| text-7xl | 4,5 rem | 72 px | Lema de la página de inicio |
| text-8xl | 6 rem | 96 px | Rótulo decorativo |
| text-9xl | 8 rem | 128 px | Cifra en un bloque de estadísticas |
Es la escala de tamaños de texto predeterminada de Tailwind CSS en la versión 4.3, comprobada el 7 de agosto de 2026 en la documentación del fabricante [4]. Si ves 0,875 o 1,875rem en una hoja de estilos, casi seguro viene de aquí.
Rem y píxel, uno al lado del otro
| Característica | rem | px |
|---|---|---|
| Punto de referencia | Tamaño de fuente del elemento html | Ninguno, es un valor absoluto |
| Valor predeterminado | 1rem = 16 px | 1 px = 1/96 de pulgada |
| Reacción a los ajustes de quien lee | Escala con ellos | Se queda igual |
| Elementos anidados | Sin efecto, siempre cuenta desde la raíz | Sin efecto |
| Uso habitual | Tamaños de texto, espaciados, anchos | Bordes, sombras, filetes |
| En Tailwind CSS | Unidad de la escala de texto y espaciado | Cualquier valor entre corchetes |
¿Cuándo te hará falta esta conversión?
Comprobar una maqueta
El diseño indica un titular de 30 px y el código dice 1,875rem. Una multiplicación te dice si ambas cifras describen el mismo tamaño.Leer una hoja de estilos ajena
Entras en un proyecto escrito en rem y quieres saber cuánto miden los espaciados. La base de 16 px convierte 0,75rem en los conocidos 12 píxeles.Prueba de accesibilidad
Pon la base en 20 px y mira cuánto crece cada elemento cuando alguien amplía el texto en el navegador.Trabajo con la técnica del 62,5%
Con base 10 px los valores salen redondos: 2,4rem son 24 píxeles. El convertidor acepta esa base igual que la predeterminada.
Convertir otras unidades a Píxeles
Explorar otros conversores de unidades
Fuentes
- CSS Values and Units Module Level 4 — W3C
- Understanding SC 1.4.4: Resize Text (WCAG 2.2) — W3C
- Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público — Boletín Oficial del Estado
- font-size – Typography — Tailwind CSS
Todos los valores de las tablas se calcularon a partir de las definiciones de las unidades y se comprobaron aritméticamente antes de publicarlos. Los datos históricos y los nombres de las unidades locales proceden de las fuentes indicadas arriba.
Última revisión del contenido: · redactado y verificado por el equipo de Arteon
Preguntas frecuentes
¿Cuántos píxeles son 1rem?
Con el valor predeterminado del navegador, 1rem son 16 píxeles. La cifra sale del tamaño de texto del elemento html, así que tras poner html { font-size: 62.5% } ese mismo 1rem da 10 píxeles, y en quien tiene el texto ampliado da 20 o más.
¿1rem son siempre 16 px?
16 px es el tamaño de texto predeterminado del navegador, no una constante de la especificación CSS. Quien lee lo cambia en los ajustes de su programa y quien publica lo cambia en la hoja de estilos. Por eso el campo de base admite cualquier valor de 1 a 100 px.
¿Cuántos píxeles son 1,5rem?
24 píxeles con base 16 px, 15 píxeles con base 10 px y 30 píxeles con 20 px. El valor 1,5rem corresponde a la clase text-2xl de Tailwind CSS y es un tamaño habitual de titular de sección.
¿Cuántos píxeles son 1,25rem?
20 píxeles con la base predeterminada de 16 px. Es la clase text-xl de Tailwind CSS, habitual en titulares de tarjeta y elementos destacados de la interfaz.
¿Cuántos píxeles son 0,875rem?
14 píxeles con base 16 px. El valor corresponde a la clase text-sm y es el tamaño habitual del texto de ayuda y de las etiquetas de los campos.
¿Cuántos píxeles son 32rem?
512 píxeles con base 16 px. Los valores de ese orden describen el ancho de una columna o el máximo de un contenedor, no un tamaño de texto.
¿Qué es la técnica del 62,5%?
Escribir html { font-size: 62.5% } deja la base en 10 px, porque el 62,5% de 16 es exactamente 10. El cálculo se hace entonces de cabeza: 2,4rem son 24 píxeles. Al texto del body hay que devolverle un tamaño legible, normalmente 1.6rem, para que la página no quede compuesta en cuerpo diez.
¿Cuál es la diferencia entre rem y em?
El rem se refiere al tamaño de fuente del elemento html y da el mismo resultado en todo el documento, por muy anidado que esté un elemento. El em se refiere al del elemento padre, así que al anidar los valores se acumulan. Para los tamaños de texto se recurre al rem, porque el resultado es previsible.
¿Tailwind CSS usa rem?
Sí. La escala de tamaños predeterminada está en rem: text-base es 1rem, text-2xl es 1,5rem y text-9xl es 8rem. La escala de espaciado trabaja en la misma unidad, así que cambiar la base desplaza toda la maquetación de una vez.
¿Cuándo conviene el píxel antes que el rem?
Allí donde una medida deba quedarse fija al margen del tamaño del texto: bordes, sombras, filetes y elementos gráficos sueltos. Los tamaños de texto, los espaciados y los anchos de columna van en rem para que la maquetación responda a los ajustes de quien lee.
¿Cómo influye el rem en la accesibilidad?
El criterio WCAG 1.4.4 exige que el texto pueda ampliarse hasta el 200% sin perder contenido ni funcionalidad. Una maquetación escrita en rem crece con el ajuste del navegador y lo cumple sin trabajo añadido, mientras que los valores en píxeles se quedan igual.
¿Cuántos rem es 1 píxel?
Con base 16 px un píxel son 0,0625rem. Conviene conocer algunos pares en el otro sentido: 12 px son 0,75rem, 14 px son 0,875rem, 20 px son 1,25rem y 24 px son 1,5rem.
Ayúdanos a mejorar nuestras herramientas
¿Tienes una idea para una función, has encontrado un fallo o quieres proponer otra herramienta? Escríbenos: respondemos en menos de 24 horas.