PX a REM: La Guía del Desarrollador para Tipografía Escalable
Aprende por qué las unidades rem mejoran la accesibilidad, cómo calcularlas y las mejores prácticas para tipografía responsive en CSS.
La elección entre px y rem en CSS no es solo una preferencia estilística — tiene consecuencias directas en la accesibilidad, el control del usuario y el diseño responsive. Millones de usuarios establecen un tamaño de fuente personalizado en las preferencias de su navegador, y una hoja de estilos escrita completamente en px ignora esa configuración por completo.
Esta guía explica la mecánica de cada unidad, la fórmula para convertir px a rem y las reglas prácticas para saber cuándo usar cada una en una base de código CSS real.
Entendiendo las unidades CSS (px, rem, em, vh)
CSS ofrece múltiples unidades de longitud para diferentes casos de uso. px (píxeles) es una unidad absoluta. rem (root em) es una unidad relativa basada en el font-size del elemento raíz (<html>). em es una unidad relativa basada en el font-size del elemento actual. vh y vw son relativas al viewport: 1vh = 1% de la altura del viewport. Cada unidad tiene casos de uso apropiados e inapropiados.
Herramienta gratuita Conversor PX a REM Convierte al instante valores en píxeles a rem con cualquier tamaño basePor qué px es problemático para la accesibilidad
Los navegadores permiten a los usuarios establecer un tamaño de fuente predeterminado en preferencias (típicamente 16px por defecto, pero los usuarios pueden configurar 20px, 24px o más). Cuando configuras font-size: 16px en CSS, esto anula la preferencia del usuario. Esto viola el criterio de éxito WCAG 2.1 1.4.4 (Cambio de tamaño del texto), que requiere que el texto pueda redimensionarse hasta el 200% sin pérdida de contenido o funcionalidad.
Cómo funciona rem (root font-size)
La unidad rem siempre es relativa al font-size del elemento <html>. Por defecto, los navegadores lo establecen en 16px. Si un usuario aumenta el tamaño de fuente del navegador a 20px, entonces 1rem = 20px — todos los valores basados en rem se escalan proporcionalmente. Nunca establezcas font-size en <html> en píxeles (ej. html { font-size: 16px }) ya que esto anula el propósito. Usa un porcentaje: html { font-size: 112.5% } establece la base en 18px en un navegador predeterminado de 16px.
Herramienta gratuita Verificador de Contraste de Color Verifica las relaciones de contraste WCAG 2.1 junto con la accesibilidad del tamaño de fuenteFórmula PX a REM
La fórmula es simple: rem = px / tamaño-fuente-base. Con la base predeterminada de 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 24px = 1.5rem, 32px = 2rem. En preprocesadores CSS (Sass, Less), puedes definir una función. En CSS moderno, las propiedades personalizadas y calc() pueden automatizar esto sin un preprocesador.
/* Función Sass */
@function rem($px) {
@return #{$px / 16}rem;
}
/* Uso */
font-size: rem(18); /* → 1.125rem */
/* CSS puro */
:root {
--base: 16;
}
.text {
font-size: calc(18 / var(--base) * 1rem);
}Cuándo usar rem vs em vs px
Usa rem para tipografía global (texto del cuerpo, encabezados, etiquetas) y para espaciado que deba escalar con la preferencia de tamaño de fuente del usuario. Usa em para el espaciado a nivel de componente que sea proporcional al font-size propio del componente (padding dentro de un botón). Usa px para bordes, sombras y elementos de layout que no deban escalar con el texto. Usa unidades viewport (vh, vw) para elementos de layout que deban relacionarse con el viewport.
Propiedades CSS personalizadas para la base rem
Un patrón común es establecer una propiedad CSS personalizada para el tamaño de fuente base. Establece font-size como porcentaje en <html> para respetar las preferencias del usuario, luego usa rem en todo. La función clamp() crea tipografía fluida que se escala entre valores mínimo y máximo basándose en el ancho del viewport, sin breakpoints de media query.
/* Base accesible */
html {
font-size: 100%;
}
body {
font-size: 1rem;
}
h1 {
font-size: 2rem;
}
/* Tipografía fluida con clamp */
.hero-title {
font-size: clamp(1.5rem, 4vw, 3rem);
}