Píxeles a rem — Domina las unidades CSS de una vez por todas
📷 Pexels / PexelsPíxeles a rem — Domina las unidades CSS de una vez por todas
Guía práctica sobre px, rem y em en CSS. Cuándo usar cada unidad, cómo hacer la conversión y por qué rem es esencial para la accesibilidad web.
La maqueta está abierta. Dice font-size: 18px, padding: 24px, margin-top: 40px. Al cambiar al editor de código, surge inevitablemente la pregunta: ¿debería convertir esto a rem? ¿O puedo dejar px?
Esta duda es familiar para muchos desarrolladores. Una vez que se entiende cuándo usar cada unidad CSS, se escribe código más accesible y mantenible casi de forma natural.
Por qué existe rem
Las unidades CSS se dividen en absolutas y relativas. px es absoluta — un píxel en pantalla, fijo, independiente de todo.
rem es relativa. La abreviatura significa "root em" y se refiere al tamaño de fuente del elemento raíz — la etiqueta html. El navegador usa 16px por defecto. Sin personalización:
- 1rem = 16px
- 0.875rem = 14px
- 1.5rem = 24px
- 2rem = 32px
"Puedo hacer la división con una calculadora, ¿para qué usar rem?" — La razón es la accesibilidad.
Algunos usuarios aumentan el tamaño de fuente predeterminado en su navegador, por ejemplo a 20px o 24px, por razones de visión o preferencia de lectura. Con layouts en px, esas preferencias se ignoran por completo. Con rem, todo lo definido en rem se adapta proporcionalmente al tamaño de fuente elegido por el usuario.
Las Web Content Accessibility Guidelines (WCAG) requieren que el tamaño del texto pueda ser modificado por el usuario. rem es la forma más natural de cumplir este requisito.
Qué unidad usar y cuándo
rem recomendado para:
font-size(cuerpo del texto, títulos, etiquetas de botones)margin,padding(espaciados en el layout)width,max-width(anchos de contenedores)gapen grillas y flexbox
px apropiado para:
border-width(border: 1px solides la práctica estándar)- Valores de blur y spread de
box-shadow - Tamaños fijos de iconos decorativos
- Detalles de
outline
em con precaución:
- Espaciados dentro de un componente que deben ser proporcionales a su propio tamaño de fuente (ej:
padding: 0.5em 1empara un botón) - Breakpoints de media query para respetar el zoom del usuario
em se acumula en elementos anidados. A menos que ese efecto sea intencionado, rem es la opción más segura.
La fórmula de conversión
valor rem = valor px ÷ tamaño base
Conversiones comunes con base de 16px:
| Valor px | Valor rem |
|---|---|
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
Los valores más frecuentes se aprenden de memoria, el resto se busca en una tabla o se calcula con una herramienta.
El PixelRemConverter
El PixelRemConverter en ToolboxHubs hace el cálculo por ti:
- Ingresar el valor px — El rem correspondiente aparece de inmediato
- Ajustar la base — 16px por defecto, modificable según el tamaño de fuente raíz del proyecto
- Usar la tabla de conversión — Vista general de tamaños comunes con sus equivalentes rem
- Conversión inversa — rem a px también funciona
Al implementar CSS desde maquetas, tener esta herramienta abierta al lado facilita mucho el trabajo.
Ejemplo práctico
Una maqueta de Figma da estos valores:
- Título de tarjeta:
font-size: 28px - Cuerpo de tarjeta:
font-size: 14px - Relleno interior:
padding: 20px - Borde:
border: 1px solid
En CSS:
.card-title {
font-size: 1.75rem; /* 28px */
}
.card-body {
font-size: 0.875rem; /* 14px */
}
.card {
padding: 1.25rem; /* 20px */
border: 1px solid #e2e8f0; /* px se queda */
}
El borde se queda en px porque un borde de 1px siempre debe ser 1px — independientemente de la configuración de tamaño de fuente. Esta consistencia en el pensamiento hace el código más mantenible.
Escalado con un solo ajuste
Cuando todos los tamaños tipográficos y espaciados están en rem, un solo cambio en el elemento raíz escala toda la página:
html {
font-size: 14px; /* Móvil: ligeramente más compacto */
}
@media (min-width: 1024px) {
html {
font-size: 16px; /* Desktop: estándar */
}
}
Sin necesidad de escribir cientos de media queries individuales para cada elemento. Todo lo que está en rem se adapta automáticamente.
El truco del 62.5%
Una técnica popular en la comunidad es escribir html { font-size: 62.5%; } para llevar la base a 10px. La división se convierte entonces en "dividir por 10": 1.4rem = 14px, 2.4rem = 24px.
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem; /* = 16px */
}
El inconveniente: si un usuario modifica el tamaño de fuente de su navegador, la lógica del 62.5% no se comporta exactamente como se espera, ya que se basa en el valor predeterminado del navegador. Para proyectos con fuerte enfoque en accesibilidad, mantenerse en la base estándar de 16px es más confiable.
Herramientas relacionadas
Convertidor de unidades CSS — También convierte vw, vh, em, % y otras unidades CSS.
Generador de gradiente CSS — Útil cuando se trabaja con background-size y otras propiedades dimensionales.
En conclusión
px y rem no se excluyen mutuamente — tienen fortalezas diferentes. Para tamaños de fuente y espaciados que deben adaptarse al usuario: rem. Para detalles visuales fijos como bordes: px.
Una vez que este modelo mental está interiorizado, la elección se hace de forma natural al escribir CSS. El PixelRemConverter se encarga del cálculo, la decisión queda en manos del desarrollador.