AI Tools Free
Tutoriales para Desarrolladores y Código

PX vs. REM vs. EM en CSS Moderno: Fórmulas de Conversión y Tipografía Fluida con clamp()

Convierte PX a REM y EM en CSS moderno, crea tipografía fluida con la fórmula de interpolación lineal clamp() y alinea textos a una cuadrícula base.

Por AI Tools Free Editorial Team 7 min de lectura
PX to REM ConverterCSS Clamp GeneratorBaseline Grid Calculator
Herramienta interactiva PX to REM Converter
PX to REM Converter Abrir herramienta gratuita

Fijar font-size: 16px en toda una hoja de estilos parece inofensivo hasta que un usuario con baja visión cambia el tamaño de fuente predeterminado de su navegador de 16px a 24px: los textos definidos en px ignoran su preferencia, mientras que las medidas en rem se adaptan de inmediato.

Eso no significa que debas pasar cada número de tu archivo CSS a rem. Cada unidad cumple una función específica en un sistema de diseño.

Matriz de decisión rápida: Cuándo usar px, rem, em o vw

Unidad CSSRelativa a¿Respeta la Fuente del Navegador?Uso Recomendado en Producción
remTamaño de fuente raíz en <html> (16px por defecto)SíTamaños de fuente globales, max-width de contenedores, espaciado vertical y media queries
emfont-size calculado del propio elemento o su padreSí (se multiplica al anidar)padding horizontal en botones (1.1em), iconos SVG inline (width: 1em) y letter-spacing
pxPíxel de referencia CSS (1/96 de pulgada)No (solo escala con zoom de página completa)Bordes de 1px o 2px, outline-offset y desenfoque de sombras
vw / svhAncho o alto de la ventana gráficaNoAlturas de portada (100svh) y pendiente fluida combinada con rem dentro de clamp()

Fórmula exacta de PX a REM

En todos los navegadores modernos, el elemento raíz <html> sin estilos tiene un tamaño base de 16px:

Fórmula de PX a REM: rem = px_objetivo / 16 (y px = rem * 16 con raíz de 16px).

  • 12px = 0.75rem
  • 14px = 0.875rem
  • 16px = 1rem
  • 18px = 1.125rem
  • 24px = 1.5rem
  • 32px = 2rem

Cómo calcular tipografía fluida con clamp(mín, preferido, máx)

Para escalar un encabezado <h1> de 28px (1.75rem) en pantallas móviles de 375px hasta 44px (2.75rem) en pantallas de escritorio de 1200px sin saltos bruscos:

Fórmula de Interpolación Lineal para clamp(): pendiente = (max_px - min_px) / (max_vw - min_vw), interseccion_px = min_px - (pendiente * min_vw), y preferido = (interseccion_px / 16)rem + (pendiente * 100)vw.

h1 {
  font-size: clamp(1.75rem, 1.295rem + 1.94vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

Alineación de line-height a una cuadrícula base vertical

Combina tus tamaños en rem con alturas de línea múltiplos de 4px (0.25rem) o 8px (0.5rem) y comprime tu hoja de estilos antes de pasar a producción:

Preguntas frecuentes

¿Sigue siendo recomendable usar html { font-size: 62.5%; } para que 1rem equivalga a 10px?

En proyectos que integran librerías de componentes modernas que asumen 1rem = 16px, cambiar la raíz a 62.5% encoge modales y controles externos al 62.5% de su tamaño previsto. Es más seguro mantener la raíz en 100% (16px) y usar variables CSS o un conversor de PX a REM.

¿Por qué usar solo unidades vw dentro de clamp() falla en accesibilidad WCAG 1.4.4?

Las unidades de ventana (vw) solo responden al ancho de la pantalla, no al nivel de zoom del navegador. Siempre suma un término en rem junto con vw en el valor preferido, por ejemplo clamp(1.75rem, 1.295rem + 1.94vw, 2.75rem), para que el texto escale al hacer zoom al 200%.

¿En qué propiedades de CSS conviene seguir usando px en lugar de rem?

Usa px para bordes finos de 1px o 2px, desplazamientos de sombras (box-shadow) y divisores estructurales que deben mantenerse nítidos en píxeles físicos sin engrosarse cuando el usuario aumenta el tamaño de fuente de lectura.