Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.
A largura é o mais silencioso dos eixos tipográficos. Os leitores raramente a notam conscientemente, mas ela governa os dois recursos dos quais a legibilidade depende: o espaço dos olhos dentro das letras e o número de caracteres que cabem em uma linha. A constatação de 2005 era que larguras do regular ao levemente condensado são as mais legíveis — tipos estendidos espalham as letras para além do reconhecimento fácil, e tipos fortemente condensados sufocam os olhos que distinguem um e de um c ou de um o. Essa constatação envelheceu bem. O que mudou foi a maquinaria: a largura já não é uma propriedade fixa de um arquivo de fonte, e sim um eixo de design contínuo e programável.
O que mudou desde 2005
Em 2005, uma fonte "condensada" era um arquivo separado, quando existia, e os web designers em geral não tinham nem as fontes nem o mecanismo de entrega para usá-la. Dois desenvolvimentos transformaram isso. A entrega de web fonts (a era moderna do @font-face, a partir de cerca de 2010) tornou disponíveis cortes condensados e estendidos reais. Depois, as fontes variáveis OpenType (de 2016 em diante) registraram wdth como eixo padrão, exposto no CSS por meio de font-stretch — agora formalmente com o alias font-width —, com valores nomeados como condensed (75%) e semi-condensed (87,5%), ou porcentagens arbitrárias nas fontes que suportam a faixa.
A propriedade crítica de um eixo de largura projetado é que ele não é escala. Quando uma fonte variável se estreita ao longo do wdth, a interpolação do designer mantém consistentes os pesos dos traços verticais, conserva os olhos tão abertos quanto a geometria permite e reajusta o espaçamento. A escala horizontal — transform: scaleX(0.8) ou seus ancestrais — faz o oposto: afina os traços verticais em relação aos horizontais, distorce as curvas e comprime o espaçamento proporcionalmente. A distinção entre um condensado verdadeiro e um falso condensado é exatamente a distinção entre um itálico verdadeiro e um romano cisalhado, e importa para os mesmos leitores com baixa visão.
A segunda mudança é conceitual. O design responsivo nos ensinou que a largura da linha, e não a escolha da fonte, é a variável que os usuários de fato experimentam — e a largura agora é uma ferramenta para gerenciá-la. Uma manchete que quebra mal em viewports estreitos pode apertar algumas unidades de largura em vez de encolher abaixo do tamanho legível. Essa é uma capacidade genuinamente nova, e vem com maneiras genuinamente novas de errar.
Largura e o orçamento dos olhos
A mecânica de legibilidade da Versão 1 ainda descreve corretamente o dilema. Larguras estendidas ampliam as letras horizontalmente sem acrescentar informação distintiva; nos corpos de leitura, retardam levemente o reconhecimento e desperdiçam a medida. Larguras fortemente condensadas fecham os olhos e reduzem as diferenças espaciais entre pares confundíveis — em um condensado apertado, o, e e c convergem, e o ritmo das verticais em palavras como minimum vira uma cerca de estacas.
Para texto contínuo, a faixa segura permanece estreita: aproximadamente 90% a 100% da largura normal — do normal até pouco antes do semicondensado. Cortes condensados e mais estreitos são ferramentas de exibição — manchetes, rótulos, tabelas densas em dados onde um condensado projetado supera genuinamente um regular encolhido. Larguras estendidas são ferramentas de branding. Nenhum dos dois pertence aos parágrafos.
O peso interage com a largura. Condensar um tipo em negrito fecha os olhos duplamente; se for preciso condensar, fique no peso regular ou mais leve. O corpo também interage: qualquer largura que funcione em uma manchete de 40px precisa ser relaxada no corpo de texto de 16px. Algumas fontes variáveis pareiam o wdth com um eixo de tamanho óptico (opsz) que gerencia isso parcialmente; a maioria deixa a cargo de você.
Zoom, ampliação e baixa visão
A população que mais precisa de larguras generosas é a mais propensa a encontrar tipo condensado nas piores condições. Usuários de lupas de tela veem uma pequena janela sobre uma página ampliada: o tipo condensado ampliado revela seus olhos fechados e seu ajuste apertado sem o contexto compensador da linha inteira. Leitores usando o zoom do navegador a 200% — nível que o critério Redimensionar texto das WCAG 2.2 (1.4.4) exige que o conteúdo suporte — acionarão seus layouts de viewport estreito, que é precisamente onde os designers agora se sentem tentados a condensar o tipo para fazer as coisas caberem.
Resista a essa tentação no texto corrido. Se um layout só funciona a 200% de zoom espremendo as letras, o problema é o layout. O WCAG 1.4.10 (Refluxo) aponta a direção certa: o conteúdo deve refluir para uma única coluna em vez de se comprimir. O ajuste de largura é legítimo para manchetes sob refluxo; é um sinal de alerta quando aplicado a parágrafos.
As adaptações de espaçamento de texto também importam aqui. O WCAG 1.4.12 exige que aumentos aplicados pelo usuário à entreletra e ao espaço entre palavras não quebrem o conteúdo. O tipo condensado que depende de ajuste apertado tende a desmoronar visualmente quando um usuário com baixa visão adiciona letter-spacing — mais uma razão para manter o texto contínuo perto da largura normal, onde o tracking adicional se degrada com graça.
Evitando o falso condensado
O falso condensado sobrevive na natureza em três formas: transforms CSS sobre texto, font-stretch legado aplicado a fontes sem eixo de largura (que os navegadores corretamente ignoram, mas que designers às vezes "consertam" com transforms) e texto em SVG ou canvas escalado de forma não uniforme. As três produzem a distorção de verticais afinadas que nenhum designer de tipos aprovou. Se um design genuinamente precisa de tipo mais estreito, as opções são: uma fonte variável com eixo wdth real, um corte condensado projetado à parte ou um layout diferente. Não existe uma quarta opção que respeite o leitor.
Quando usar o eixo wdth, prefira a propriedade de alto nível font-stretch/font-width ao font-variation-settings bruto, para que o navegador possa gerenciar herança e fallback com sensatez, e verifique o fallback: em sistemas onde a fonte variável não carrega, uma solicitação de condensado contra uma pilha de fallback deve degradar para a largura normal, não para um aperto sintetizado.
Em CSS
/* Width belongs to the wdth axis — never to transforms */
body { font-stretch: 100%; }
.compact-table { font-stretch: 92%; } /* slightly condensed floor */
/* Anti-pattern — distorts stroke contrast and spacing:
.squeezed { transform: scaleX(0.8); } */Recomendações
- Mantenha o texto contínuo entre aproximadamente 90% e 100% da largura normal; a constatação de 2005 permanece.
- Reserve cortes condensados projetados para manchetes, rótulos e composições de exibição com espaço crítico; reserve cortes estendidos para branding.
- Nunca falsifique a largura: nada de transforms scaleX, nada de escala não uniforme de texto em SVG ou canvas.
- Use o eixo variável wdth via font-stretch (font-width) e confirme um fallback gracioso quando a fonte não carregar.
- Não condense o texto corrido para sobreviver ao zoom de 200% ou a viewports estreitos — refaça o fluxo, conforme o WCAG 1.4.10.
- Verifique se o texto permanece intacto quando os usuários aumentam a entreletra e o espaço entre palavras (WCAG 1.4.12); composições condensadas apertadas costumam falhar nisso primeiro.
- Evite combinar largura condensada com peso negrito ou corpos pequenos; o orçamento dos olhos não estica tanto.