Respeta la escala de texto del sistema operativo

Descripción general

Los usuarios con discapacidad visual suelen configurar el ajuste de escala del texto a nivel del sistema operativo (como el tipo dinámico en iOS o el ajuste de escala del tamaño de la fuente en Android o ChromeOS). De forma predeterminada, los navegadores para dispositivos móviles ignoran estos parámetros de configuración de accesibilidad a nivel del SO para evitar que los sitios web heredados de píxeles fijos se rompan visualmente.

En lugar de mantener tu página estática o depender de cálculos de diseño de JavaScript personalizados y frágiles, habilita el ajuste de escala de texto nativo del sistema operativo con la etiqueta <meta name="text-scale">. Cuando está activo, el navegador escala de forma dinámica el tamaño de la fuente raíz (1rem) para que coincida con la preferencia del SO del usuario, lo que permite que todos los tamaños de fuente, diseños y espaciados relativos (rem/em) se escalen de forma automática y elegante.

Implementación

1. Habilita el escalamiento de texto del SO

Coloca el elemento <meta name="text-scale"> dentro del elemento <head> de tu documento. Esto indica a los navegadores compatibles que tu diseño es moderno, adaptable y seguro para escalar:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. Usa tipografía y espaciado relativos

Define los tamaños de fuente con unidades relativas (rem o em) en lugar de píxeles fijos (px). Usa valores sin unidades para las alturas de línea, de modo que se ajusten proporcionalmente con el tamaño de fuente calculado de cada elemento.

Usa unidades relativas para los márgenes y el padding cuando el espaciado esté vinculado al tamaño del texto o deba adaptarse a medida que se escala el texto. El espaciado que es independiente del texto puede usar unidades fijas cuando corresponda, siempre que el ajuste no cause recortes de texto, superposiciones, pérdida de contenido o un diseño inutilizable:

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

Establece el tamaño de texto base en body solo cuando el diseño necesite un tamaño diferente del predeterminado del navegador heredado; de lo contrario, deja que se herede. Establece tamaños en elementos específicos, como encabezados, con unidades relativas, como rem o em. Usa rem para un tamaño relativo al tamaño de fuente raíz y em cuando el tamaño deba depender del tamaño de fuente del elemento superior. No establezcas un tamaño de fuente personalizado en :root ni html.

Tipografía fluida

La tipografía fluida PUEDE usar unidades relativas al viewport, como vw, siempre que los tamaños de fuente también incluyan un componente relativo a la fuente, como rem o em. Para obtener más técnicas de escalamiento fluido, incluidas las unidades de consulta de contenedores y clamp(), consulta Escalamiento fluido.

Evita ajustar el tamaño del texto exclusivamente con unidades de viewport:

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

En su lugar, combina un valor relativo a la fuente con un escalamiento relativo al viewport y usa límites mínimos y máximos relativos:

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

Prueba que se pueda cambiar el tamaño del texto a, al menos, el 200% de su tamaño predeterminado sin perder contenido ni funcionalidad. Para la tipografía fluida, una regla general útil es mantener el tamaño de fuente máximo en no más de 2.5 veces el mínimo. También prueba el reflujo con un ancho de viewport de 320 píxeles CSS (equivalente a un zoom del 400% desde un viewport de 1,280 píxeles CSS de ancho). El contenido DEBE permanecer disponible sin desplazamiento bidimensional, excepto cuando sea esencial.

3. Usa puntos de interrupción responsivos y escalables

Los puntos de interrupción responsivos NO DEBEN suponer que el texto permanecerá en su tamaño predeterminado. Cuando un punto de interrupción está destinado a responder al espacio disponible para el texto, prefiere los diseños basados en el contenido, las consultas de contenedores o las consultas de medios basadas en em en lugar de los umbrales de píxeles fijos.

Prueba los diseños responsivos con el escalamiento de texto del sistema operativo y el zoom del navegador habilitados. El texto DEBE seguir siendo legible y el contenido DEBE seguir siendo visible sin superposición, recorte ni desplazamiento horizontal.

4. Asegúrate de que el contenido se ajuste y las alturas sean flexibles

Cuando el texto se escala, los elementos requieren más espacio vertical y horizontal para evitar que se corten o se superpongan. Para que tus componentes sean sólidos, diseña tus diseños de modo que se expandan de forma dinámica alrededor del contenido en lugar de forzar coordenadas rígidas:

• Permite que los contenedores de texto crezcan: Los componentes y contenedores que incluyen texto DEBEN poder crecer para alojar el texto ajustado. Evita los valores fijos de height o block-size y los valores restrictivos de max-height o max-block-size que puedan causar recortes o desbordamientos. Prefiere el tamaño basado en el contenido; usa min-height o min-block-size solo cuando se necesite un tamaño mínimo.
• Permite el ajuste natural: No restrinjas el ajuste de texto del eje intercalado con white-space: nowrap en los bloques que contienen oraciones. Permite que el texto se ajuste a las líneas nuevas de forma natural.
• Emplea un ajuste flexible de Flexbox y Grid (ejemplo opcional): Para las galerías de tarjetas de varias columnas, usa columnas de redistribución como repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) para que los elementos se apilen verticalmente si se cruzan sus umbrales de ancho relativo:

/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. NO anules el tamaño de fuente raíz

Cuando habilites la función a través del elemento <meta name="text-scale" content="scale">, NO configures de forma explícita el elemento raíz font-size en tu hoja de estilo. Esto incluye declaraciones en :root o html, y se aplica a unidades absolutas, unidades relativas y valores calculados.

Por ejemplo, no anules el tamaño de fuente raíz con un valor fijo:

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

No combines la habilitación de <meta name="text-scale" content="scale"> con env(preferred-text-scale) para aplicar el escalamiento de texto del sistema operativo de forma manual. El navegador aplica el escalamiento a través de la habilitación de la meta, por lo que usar ambos puede generar un escalamiento doble:

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

Deja el tamaño de fuente raíz en el navegador. El navegador controla automáticamente la escala de texto del sistema operativo y la aplica al contenido con un tamaño relativo al tamaño de la fuente raíz.

Estrategias de resguardo

En los navegadores que no admiten <meta name="text-scale" content="scale">, el diseño se degrada de forma elegante. La página mostrará el diseño con el tamaño de fuente base predeterminado estándar del navegador (por lo general, 16 px), y el usuario podrá seguir usando las opciones estándar de zoom manual de la página o de pellizcar para hacer zoom.