Error de conexión. Inténtalo de nuevo.

Saltar al contenido
SEO Tools
Ayuda y documentación
UX / UI Impacto bajo Medio 30 a 60 minutos

Unidades de fuente relativas (rem/em vs px)

Prefiera rem/em a px fijo para los tamaños de fuente.

Qué es

El tamaño de fuente se puede especificar fijo en px o relativamente en rem/em. Rem se basa en el tamaño base del documento, por lo que responde a la configuración de tamaño de fuente del navegador del usuario.

Por qué importa

Se corrigió que los px lo ignoraran cuando un usuario aumenta el tamaño de fuente predeterminado en el navegador (común entre personas con visión más débil). Rem/em respeta esta configuración: son más accesibles y más fáciles de escalar de manera consistente.

Cómo hacerlo

  1. 1Establezca el tamaño base en <html> (normalmente 100% = 16px).
  2. 2Especifique tamaños de fuente en rem (por ejemplo, 1rem, 1,25rem, 0,875rem).
  3. 3Úselo em donde el tamaño debe derivar del padre.
  4. 4Deje los píxeles fijos solo para detalles en los que la escala no tenga sentido (por ejemplo, líneas de 1 px).

Ejemplo

Incorrecto
h1{ font-size: 32px; }
p{ font-size: 14px; }
Correcto
html{ font-size: 100%; }
h1{ font-size: 2rem; }
p{ font-size: 0.95rem; }

Conclusión

Las unidades relativas son más accesibles y mantenibles. No es un desastre como el zoom bloqueado, pero en un sitio nuevo vale la pena hacerlo desde el principio con rem. Respeta a los usuarios que aumentan el tamaño de su fuente.

Temas relacionados