Entrevista frontend: ¿Cómo se utiliza font-size-adjust para mantener legible el texto de reserva (fallback)?

Planteamiento y contexto

Un sistema de diseño utiliza una fuente de marca, pero las condiciones de la red, las licencias o la cobertura de sistemas de escritura pueden hacer que el navegador utilice una fuente de reserva (fallback). Explique cómo font-size-adjust puede reducir los saltos percibidos en el tamaño de las minúsculas y en qué se diferencia del ajuste automático de texto en dispositivos móviles (text autosizing).

Qué está evaluando el entrevistador

• Comprensión de que la altura de la x (x-height) y el tamaño de la fuente son métricas diferentes.
• Capacidad para definir la calibración de fallbacks, la carga y los límites de mejora progresiva.
• Capacidad para combinar consistencia visual, cobertura de sistemas de escritura y comprobaciones de accesibilidad.

Preguntas para aclarar primero

1. ¿Qué sistemas de escritura cubren la fuente principal y las de reserva?
2. ¿El objetivo es reducir los saltos durante el tiempo de carga o mantener legible un fallback permanente?
3. ¿Se permite el ajuste automático de texto en móviles y qué tokens de tamaño e interlineado existen ya?

Una respuesta de 30 segundos

font-size-adjust calibra la altura relativa de las minúsculas utilizando una métrica de fuente. Mediría las fuentes principal y de reserva, y luego usaría una proporción explícita o from-font de forma progresiva. No puede hacer que los anchos de los glifos, el interlineado o las métricas CJK sean idénticos, por lo que probaría sistemas de escritura, zoom, fallas de carga y configuraciones de baja visión. text-size-adjust es un control independiente para el ajuste automático de texto en móviles, no una herramienta de calibración de fuentes de reserva.

Análisis paso a paso

1. Separar el tamaño de la altura de la x

font-size-adjust mantiene las letras minúsculas a una altura legible comparable a la de la fuente principal. Dos fuentes configuradas a 16px pueden tener diferentes alturas de la x, haciendo que la de reserva se vea más pequeña o más grande. La propiedad ajusta una métrica relativa; no reproduce la tipografía principal.

2. Elegir una proporción explícita o from-font

Un valor explícito funciona cuando el equipo ha medido la métrica principal. Con from-font, un navegador compatible puede leer la métrica de la fuente disponible y reducir una constante ajustada manualmente. La matriz de navegadores y los archivos de fuentes aún necesitan verificación.

3. Mantener la calibración cerca de los tokens de tipografía

:root {
  --body-size: 1rem;
}

body {
  font-family: "Brand Sans", "Fallback Sans", sans-serif;
  font-size: var(--body-size);
  font-size-adjust: from-font;
  line-height: 1.5;
}

La propiedad afecta al elemento y a sus descendientes. Mantenerla cerca del token de tipografía del body evita que componentes no relacionados inventen valores de compensación. Una pila de fuentes legible sigue siendo el fallback cuando la propiedad no es compatible.

4. Gestionar el orden de carga

La calibración no elimina todos los cambios causados por el intercambio de fuentes. Combínela con una política de font-display deliberada, decisiones de precarga y un fallback aceptable. Mida la legibilidad inicial, el reflujo de texto y el estado final de la fuente por separado; no oculte contenido para perseguir un movimiento nulo.

5. Probar sistemas de escritura y locales

Una proporción de minúsculas en alfabeto latino no es un sustituto universal para texto en chino, japonés, árabe o mixto. Cree muestras localizadas e inspeccione puntuación, números, peso, ajuste de línea e interlineado. Utilice tokens específicos por locale cuando sea necesario en lugar de tratar una sola proporción como una verdad global.

6. Separarlo de text-size-adjust

text-size-adjust controla la inflación de texto del navegador en viewports móviles. No calibra la altura de la x del fallback. Identifique si el defecto es una métrica de fuente o un comportamiento del diseño móvil antes de elegir una propiedad, y evite desactivar un comportamiento de accesibilidad para solucionar el problema equivocado.

7. Definir criterios de aceptación observables

Registre el éxito de carga de fuentes, el cambio de diseño, el truncamiento por zoom y la legibilidad bajo las configuraciones de fuente del usuario en navegadores y dispositivos reales del público objetivo. Incluya regresión visual, lectores de pantalla, teclado y comprobaciones de alto contraste en el criterio de lanzamiento.

Respuesta modelo

Trataría esto como una gobernanza de métricas tipográficas. Tomaría muestras de las alturas de la x de la fuente principal y de reserva, aplicaría una proporción explícita o from-font cerca del token del body, y mantendría una pila de fuentes confiable. Esto puede mejorar la legibilidad relativa de las minúsculas, pero no puede garantizar anchos iguales, interlineados o el diseño mixto de CJK, por lo que probaría cargas de fuentes exitosas y fallidas, sistemas de escritura, zoom del navegador y dispositivos móviles. El ajuste automático en móviles pertenece a text-size-adjust. La aceptación utilizaría evidencias de diseño, truncamiento, legibilidad y accesibilidad en lugar de una sola captura de pantalla.

Errores comunes

• Afirmar que font-size-adjust hace que todas las fuentes tengan el mismo tamaño.
• Tratar from-font como algo garantizado en todos los navegadores y archivos de fuentes.
• Desactivar la ampliación móvil con text-size-adjust: none como una solución genérica.
• Probar solo una pantalla inicial en inglés y nunca probar sistemas de escritura locales o fallas de carga.
• Observar únicamente una métrica de diseño ignorando el zoom, las configuraciones de fuente del usuario y los lectores de pantalla.

Preguntas de seguimiento y respuestas

¿Qué pasa si el diseño también requiere anchos iguales?

Indique que la propiedad solo gestiona una métrica de altura relativa. Elija una fuente de reserva más cercana, ajuste el espaciado o rediseñe el ajuste de línea; no prometa que una sola proporción resuelve todas las métricas.

¿Cómo degradar cuando from-font no está disponible?

Mantenga la pila de fuentes y el tamaño predeterminado legibles, luego use detección de características o mejora progresiva para un valor explícito. Trate el comportamiento no compatible como una condición normal del navegador, no como una razón para bloquear el texto.

¿Cómo evitar que un cambio de fuente mueva un botón?

Reserve suficiente espacio, calibre la fuente de reserva y mida el ancho antes y después de que llegue la fuente principal. Las acciones críticas no deben depender de texto oculto ni de un ajuste automático impredecible.

¿Debería una página en CJK usar el mismo valor?

No lo reutilice a ciegas. CJK no se ajusta al mismo concepto de altura de la x de las minúsculas, por lo que debe validar las muestras de fuentes locales y de interlineado de forma independiente.

¿Cómo demuestra que no se perjudicó la accesibilidad?

Pruebe el zoom del navegador, las preferencias de fuentes del sistema, el orden de enfoque tras el reflujo, la salida del lector de pantalla y el alto contraste. Una captura de pantalla de píxeles fijos no es evidencia suficiente.

¿Cómo aborda el soporte de navegadores en una entrevista?

Proporcione la matriz de navegadores objetivo y un plan de detección de características, con una pila de fuentes legible cuando no haya soporte. Evite afirmar que existe soporte universal sin una matriz o evidencia de pruebas.