Respeitar a escala de texto do sistema operacional

Visão geral

Usuários com deficiência visual costumam configurar o dimensionamento de texto no sistema operacional (como o Tipo Dinâmico no iOS ou o dimensionamento de tamanho de fonte no Android/ChromeOS). Por padrão, os navegadores para dispositivos móveis ignoram essas configurações de acessibilidade do SO para evitar que sites legados de pixel fixo sejam corrompidos visualmente.

Em vez de manter a página estática ou depender de cálculos de layout JavaScript personalizados e frágeis, use o dimensionamento de texto nativo do sistema operacional com a tag <meta name="text-scale">. Quando ativo, o navegador dimensiona dinamicamente o tamanho da fonte raiz (1rem) para corresponder à preferência do SO do usuário, permitindo que todos os tamanhos de fonte, layouts e espaçamentos relativos (rem/em) sejam dimensionados de forma automática e adequada.

Implementação

1. Ativar o dimensionamento de texto do SO

Coloque o elemento <meta name="text-scale"> dentro do <head> do documento. Isso indica aos navegadores compatíveis que seu layout é moderno, adaptável e seguro para escalonamento:

<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. Usar tipografia e espaçamento relativos

Defina os tamanhos de fonte usando unidades relativas (rem ou em) em vez de pixels fixos (px). Use valores sem unidade para as alturas de linha, de modo que elas sejam dimensionadas proporcionalmente ao tamanho de fonte calculado de cada elemento.

Use unidades relativas para margens e preenchimento em que o espaçamento é acoplado ao tamanho do texto ou precisa se adaptar conforme o texto é dimensionado. O espaçamento independente do texto pode usar unidades fixas quando apropriado, desde que o dimensionamento não cause corte de texto, sobreposição, perda de conteúdo ou um layout inutilizável:

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;
}

Defina o tamanho do texto base em body somente quando o design exigir um tamanho diferente do padrão herdado do navegador. Caso contrário, deixe que ele seja herdado. Defina tamanhos em elementos específicos, como títulos, com unidades relativas, como rem ou em. Use rem para um tamanho relativo ao tamanho da fonte raiz e em quando o tamanho depender do tamanho da fonte do elemento pai. Não defina um tamanho de fonte personalizado em :root ou html.

Tipografia fluida

A tipografia fluida PODE usar unidades relativas à janela de visualização, como vw, desde que os tamanhos de fonte também incluam um componente relativo à fonte, como rem ou em. Para mais técnicas de dimensionamento fluido, incluindo unidades de consulta de contêiner e clamp(), consulte Dimensionamento fluido.

Evite dimensionar o texto exclusivamente com unidades de janela de visualização:

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

Em vez disso, combine um valor relativo à fonte com o dimensionamento relativo à janela de visualização e use limites mínimos e máximos relativos:

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

Teste se o texto pode ser redimensionado para pelo menos 200% do tamanho padrão sem perda de conteúdo ou funcionalidade. Para tipografia fluida, uma regra prática útil é manter o tamanho máximo da fonte em até 2,5 vezes o mínimo. Teste também o refluxo em uma largura de janela de visualização de 320 pixels CSS (equivalente a um zoom de 400% em uma janela de visualização de 1.280 pixels CSS de largura). O conteúdo PRECISA permanecer disponível sem rolagem bidimensional, exceto quando essencial.

3. Usar pontos de interrupção responsivos escalonáveis

Os pontos de interrupção responsivos NÃO PODEM presumir que o texto vai permanecer no tamanho padrão. Quando um ponto de interrupção precisa responder ao espaço disponível para texto, prefira layouts baseados em conteúdo, consultas de contêiner ou consultas de mídia baseadas em em em vez de limites de pixel fixos.

Teste layouts responsivos com o escalonamento de texto do sistema operacional e o zoom do navegador ativados. O texto PRECISA permanecer legível, e o conteúdo PRECISA permanecer visível sem sobreposição, corte ou rolagem horizontal.

4. Garantir o ajuste de conteúdo e alturas flexíveis

Quando o texto é ampliado, os elementos precisam de mais espaço vertical e horizontal para evitar truncamento ou sobreposição. Para manter os componentes robustos, projete os layouts para que eles se expandam dinamicamente em torno do conteúdo, em vez de forçar coordenadas rígidas:

• Permitir que os contêineres de texto aumentem: os componentes e contêineres que têm texto PRECISAM aumentar para acomodar o texto dimensionado. Evite valores fixos de height ou block-size e valores restritivos de max-height ou max-block-size que possam causar cortes ou transbordamentos. Dê preferência ao dimensionamento orientado por conteúdo. Use min-height ou min-block-size somente quando um tamanho mínimo for necessário.
• Permitir ajuste de texto natural: não restrinja o ajuste de texto no eixo inline com white-space: nowrap em blocos que contêm frases. Deixe o texto fluir para novas linhas naturalmente.
• Use o Flexbox flexível e o encapsulamento de grade (exemplo opcional): para galerias de cards com várias colunas, use colunas de refluxo, como repeat(auto-fit, minmax(min(100%, 16rem), 1fr)), para que os itens sejam empilhados verticalmente se os limites de largura relativa forem ultrapassados:

/* 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. NÃO substitua o tamanho da fonte raiz

Ao ativar o elemento <meta name="text-scale" content="scale">, NÃO defina explicitamente a raiz font-size na folha de estilo. Isso inclui declarações em :root ou html e se aplica a unidades absolutas, unidades relativas e valores calculados.

Por exemplo, não substitua o tamanho da fonte raiz por um valor fixo:

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

Não combine a ativação de <meta name="text-scale" content="scale"> com env(preferred-text-scale) para aplicar o dimensionamento de texto do sistema operacional manualmente. O navegador aplica o dimensionamento pela ativação de metadados. Portanto, usar os dois pode resultar em um dimensionamento duplo:

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

Deixe o tamanho da fonte raiz para o navegador. O navegador processa a escala de texto do sistema operacional automaticamente e a aplica ao conteúdo dimensionado em relação ao tamanho da fonte raiz.

Estratégias de fallback

Em navegadores que não oferecem suporte a <meta name="text-scale" content="scale">, o layout é degradado de forma otimizada. A página vai mostrar o layout no tamanho de fonte base padrão do navegador (geralmente 16 px), e o usuário ainda poderá usar as opções padrão de zoom manual ou de pinça.