Por qué 16px es el tamaño de fuente base predeterminado

16px es el tamaño de fuente predeterminado en los principales navegadores porque muestra el texto del cuerpo a un tamaño cómodo para las distancias de visión típicas en pantalla, y ha mantenido ese papel desde los inicios de la era CSS. El valor por defecto importa más allá de la historia: quienes necesitan texto más grande lo cambian en la configuración de su navegador, y el dimensionado basado en rem hereda esa elección — así que un sistema tipográfico anclado en el valor por defecto se mantiene accesible a medida que escala.

Este artículo cubre de dónde viene el número, qué controla realmente la base y cuándo una base distinta es la mejor opción. Forma parte de nuestra guía de escala tipográfica.

¿De dónde viene el valor por defecto de 16px?

Los primeros navegadores gráficos venían con un tamaño de texto predeterminado de «medium», que se mostraba a 16px, y CSS mantuvo la convención. El número es menos arbitrario de lo que parece. CSS asume unos 96 píxeles por pulgada nominales, lo que hace que 16px equivalga a 12 puntos — un tamaño de cuerpo en el que la tipografía impresa se había asentado mucho antes de las pantallas. La intención se trasladó: a una distancia de visión típica de escritorio, el texto de 16px ocupa aproximadamente el mismo ángulo visual que el texto de cuerpo impreso ocupa a distancia de lectura. El valor por defecto perdura porque apunta al tamaño al que los ojos lectores ya están acostumbrados — no porque el número en sí tenga algo especial.

La documentación de MDN sobre font-size cubre la mecánica: tamaños por palabra clave como medium, las unidades relativas em y rem, y cómo se resuelven frente a los tamaños heredados y del elemento raíz.

¿Por qué respetar el valor por defecto importa para la accesibilidad?

Porque el valor por defecto es una configuración del usuario, no una constante. Las personas con baja visión, o simplemente con largas jornadas frente a la pantalla, suben el tamaño de fuente predeterminado de su navegador — y cada tamaño declarado en rem escala con esa elección, ya que rem se resuelve frente al tamaño de fuente del elemento raíz. Una hoja de estilos que fija la raíz en píxeles fijos descarta silenciosamente la preferencia del usuario; una que deja la raíz en paz y dimensiona en rem la propaga por toda la jerarquía.

Este es el argumento más fuerte para tratar 16px como un ancla en lugar de una decoración: construye la escala en torno al valor por defecto, exprésala en unidades relativas, y la preferencia de 20px del usuario reproduce toda tu jerarquía un 25% más grande — con las proporciones intactas.

¿Qué controla realmente la base en una escala tipográfica?

En una escala modular, la base no es un tamaño entre muchos — es el origen a partir del cual se calcula cada uno de los demás valores. Scale Composer genera los tamaños con size = base × ratio^(i/notes), deriva los pasos de espaciado de la misma base, ratio y notas, y establece una unidad de línea base de base/2. Cambia la base y el sistema entero se mueve en proporción:

(Valores mostrados antes del redondeo.) Cada tamaño se desplaza el mismo 12,5%, y las relaciones entre niveles quedan intactas — que es el sentido de derivarlo todo de una sola ancla.

Abre la anatomía de una base de 16px en Scale Composer — la vista se centra en el paso 0 y muestra los tamaños por encima y por debajo de él, junto con la línea base de 8px que produce la base.

¿Deberías fijar html al 62,5% para facilitar los cálculos con rem?

El truco — html { font-size: 62.5% } para que 1rem equivalga a 10px — intercambia una pequeña comodidad aritmética por fricción estructural, y muchos profesionales han convergido en evitarlo. Tres razones aparecen de forma constante:

1. Las media queries no lo siguen. em y rem en las media queries se resuelven frente al tamaño de fuente inicial del navegador, no frente a tu anulación de la raíz — así que tus breakpoints y tus componentes acaban funcionando con dos valores de rem distintos.
2. El código de terceros asume 16. Las bibliotecas de componentes y los widgets embebidos suelen dimensionarse en rem asumiendo que 1rem ≈ 16px; bajo el 62,5% todos se muestran más pequeños de lo diseñado.
3. La comodidad ha caducado. Cuando una escala genera los valores y los exporta como tokens o CSS, la conversión mental de rem a px para la que existía el truco desaparece en gran medida del flujo de trabajo — el problema que resolvía ya no está donde ocurre el trabajo.

¿Cuándo es 18px una base mejor?

Cuando el producto es mayormente texto. La lectura de formato largo — artículos, documentación, cualquier cosa que una persona lee durante minutos en lugar de ojear durante segundos — se beneficia de un cuerpo de texto más grande, y los sitios editoriales suelen fijar el texto del cuerpo entre 18px y 21px. El lector se recuesta, las líneas se alargan, y 16px empieza a sentirse pequeño para la distancia.

La decisión sigue siendo sencilla porque la base es una única entrada: un producto de lectura arranca la escala en 18, uno mixto o denso se queda en 16 y reserva un paso por encima de la base para los párrafos de entrada. En cualquier caso, el resto del sistema le sigue automáticamente.

Mueve la base y observa cómo le sigue el sistema

El papel de ancla es más fácil de sentir que de leer: cambia la misma escala a una base de 18px — una configuración ajustada para la lectura de formato largo — y observa cómo cada tamaño, cada paso de espaciado y la línea base (ahora 9px) se mueven juntos mientras las proporciones se mantienen. Luego vuelve a ponerla en 16 y decide a qué distancia se lee realmente tu producto.