Una fórmula para el tamaño de fuente responsive

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.