Una fórmula para el tamaño de fuente responsive
Los desarrolladores web están debatiendo si las fórmulas responsivas que escalan el tamaño de fuente con el ancho del viewport mejoran la legibilidad o socavan las preferencias del usuario. Muchos sostienen que los sitios deberían respetar el tamaño de fuente predeterminado o configurado por el usuario en el navegador y confiar en el zoom de página completa o en el modo lector para la accesibilidad, mientras que otros defienden el tamaño fluido (a menudo con CSS `clamp()` o herramientas como Utopia y modular scales) para adaptar la tipografía a distintos dispositivos. El intercambio pone de relieve tensiones más amplias entre el control del diseño, la accesibilidad para usuarios con baja visión y los límites de los mecanismos actuales del navegador para expresar y detectar las preferencias del usuario.
Respetar las preferencias de fuente del usuario frente al control del diseñador
- Muchos sostienen que los sitios no deberían sobrescribir el tamaño de fuente raíz: los usuarios que ajustan el tamaño del texto del navegador (o el tamaño mínimo) esperan que se respete.
- Otros argumentan que la mayoría de los usuarios nunca tocan la configuración de font-size, así que unos valores predeterminados responsivos “razonables” les ayudan y no perjudican de forma significativa a los usuarios avanzados.
- Contraargumento: las malas opciones predeterminadas y la poca visibilidad de estas opciones son un problema del proveedor del navegador, no algo que cada sitio deba “arreglar” con escalado personalizado.
- Hay debate sobre un tercer grupo: personas que fijan el tamaño de fuente una vez por dispositivo y nunca lo ajustan; algunos lo ven como importante, otros como demasiado pequeño como para priorizarlo.
Escalado basado en el viewport y limitación
- Varios comentaristas critican escalar el tamaño de fuente con el ancho del viewport, diciendo que los píxeles CSS ya son “virtuales” y advirtiendo sobre texto gigante en monitores ultrapanorámicos.
- Otros consideran aceptable un escalado modesto basado en el viewport si está estrictamente limitado, por ejemplo
clamp(min, fluid, max)para evitar extremos. - El escalado lineal introduce carga de pruebas: en lugar de comprobar unos pocos puntos de ruptura, hay que considerar muchos anchos.
Unidades: rem, em, px y el truco del 62.5%
- Hay amplio acuerdo: usar rem/em para el texto para que siga las preferencias del usuario; evitar px codificados a mano en el elemento raíz.
- em frente a rem: rem para un escalado global coherente; em es útil cuando los elementos (como los encabezados) deben escalar en relación con su contexto local.
- El truco
html { font-size: 62.5%; }(para tratar rem como “10px”) es muy criticado por ser conceptualmente incorrecto y frágil; sus defensores dicen que puede seguir siendo proporcional si el texto del body se reescala adecuadamente.
Sistemas tipográficos más amplios y herramientas
- Varios insisten en que la tipografía responsive debe incluir altura de línea, espaciado y rejillas de diseño, no solo font-size.
- Se recomiendan herramientas como Utopia, modular scales, RFS y helpers de Sass para
clamp()para automatizar escalas de tipografía y espaciado.
Accesibilidad y necesidades visuales del mundo real
- Un comentarista con discapacidad visual destaca necesidades que van más allá del tamaño: trazos en negrita, alto contraste y anulación de temas “estéticos” de bajo contraste.
- Otros sugieren mitigar la mala tipografía con extensiones del navegador, el modo lector y CSS de usuario, reflejando frustración por el hecho de que la web rara vez respeta el control del usuario por defecto.