Tipografia multilíngue: fontes, alfabetos e palavras mais longas

Tipografia multilíngue é o ofício de compor texto que funciona em todos os idiomas que você publica, e não só naquele em que desenhou. Na prática, são quatro hábitos: deixar espaço para traduções mais longas que o inglês, escolher fontes que realmente contenham todos os alfabetos e acentos de que você precisa, respeitar como cada escrita é lida (árabe e hebraico correm da direita para a esquerda, chinês e japonês não têm espaços) e testar texto traduzido de verdade, não texto de enchimento. Acertando isso, um único sistema de design leva uma marca por uma dúzia de idiomas.

Planeje para palavras mais longas

A maioria dos idiomas europeus ocupa mais espaço que o inglês. O efeito é mais forte em textos curtos: um botão de uma palavra pode dobrar, enquanto um parágrafo longo cresce bem menos. A nota do W3C sobre tamanho do texto na tradução explica por quê. Aqui estão alguns rótulos do dia a dia em idiomas de que uma marca europeia costuma precisar.

• Deixe os títulos quebrarem em uma linha a mais, em vez de prendê-los a uma só.
• Dimensione botões e etiquetas pelo conteúdo, nunca por uma largura fixa.
• Reserve um terço ou mais de espaço livre em rótulos curtos e sobretítulos.
• Evite palavras dispostas letra por letra, como um rótulo vertical, que não se reorganiza.

Escolha fontes que cubram todos os alfabetos

Antes de se apaixonar por uma fonte, confira o conjunto de caracteres dela. Uma fonte que não tem um caractere recorre a outra só para aquela letra, e um título em dinamarquês pode acabar com um ø de outro desenho. As fontes listam os idiomas que suportam no Google Fonts e na maioria das páginas das fundições.

Onde uma só família não cobre tudo, combine uma fonte latina com uma específica do alfabeto, de peso, altura de x e tom parecidos. Valem os mesmos princípios da combinação de fontes, com mais um: coloque-as lado a lado no mesmo tamanho e ajuste até nenhuma parecer menor.

Tipografia árabe e layouts da direita para a esquerda

O árabe é a escrita em que os hábitos do alfabeto latino falham de forma mais visível. Ele é lido da direita para a esquerda, as letras mudam de forma conforme a posição na palavra e se ligam às vizinhas, e não há maiúsculas. O hebraico também corre da direita para a esquerda, mas as letras não se ligam.

Os estilos cúficos são geométricos e servem para títulos e logos; os estilos naskh são mais arredondados e se leem melhor em textos longos. Noto Kufi Arabic e Noto Naskh Arabic dão os dois em uma mesma família.

Acentos, diacríticos e altura de linha

Os idiomas europeus acrescentam sinais acima e abaixo das letras: Å em sueco, dinamarquês e norueguês, É em francês, Ä e Ö em finlandês e alemão, Ç e à em português. Uma entrelinha apertada, que fica nítida em maiúsculas inglesas, corta esses sinais ou os faz bater na linha de cima. Teste os títulos com suas maiúsculas acentuadas mais pesadas antes de fixar o espaçamento. A altura e o comprimento de linha trazem o básico; o texto em caixa alta pede cuidado extra aqui.

Tipografia multilíngue em CSS

Na web, diga ao navegador em que idioma e direção está cada página ou trecho. Assim ele escolhe as formas de letra, a hifenização, as aspas e a quebra de linha certas. Use propriedades lógicas para o espaçamento se inverter sozinho com a direção.

<html lang="ar" dir="rtl">
<head>
  <style>
    body { font-family: "IBM Plex Sans", system-ui, sans-serif; }
    :lang(ar) { font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", sans-serif; line-height: 1.7; }
    :lang(de), :lang(fi) { hyphens: auto; }
    .card { padding-inline-start: 24px; border-inline-start: 4px solid currentColor; }
  </style>
</head>
<body>
  <p>…</p>
  <p lang="en" dir="ltr">An English quote inside Arabic text.</p>
</body>
</html>

Os detalhes de dir e do algoritmo bidirecional estão no MDN.

Um fluxo para desenhar em vários idiomas

1. 1

   Liste todos os idiomas e alfabetos

   Anote o que você publica hoje e o que pode vir a acrescentar. Escolha fontes por essa lista, não só pelo português.

2. 2

   Desenhe com o seu idioma mais longo

   Faça primeiro as telas e posts principais em alemão ou finlandês. Se couberem, o português também cabe.

3. 3

   Teste os acentos mais pesados

   Passe os textos de teste acima por todos os estilos de título.

4. 4

   Peça a um leitor nativo que olhe

   Quebras de linha, hifenização e tom podem ser tecnicamente válidos e ainda assim parecer errados. Um leitor fluente percebe o que as ferramentas não percebem.

A própria interface do Gradiently fala 12 idiomas, de inglês, francês e alemão a dinamarquês, norueguês e finlandês, para uma equipe trabalhar no idioma em que pensa. No Pro, o kit de marca aceita arquivos de fonte de título e de texto enviados por você, então dá para acrescentar uma fonte que cubra seus acentos, e os novos designs já começam com ela. Enviar fontes personalizadas e usar o Gradiently em outros idiomas explicam os dois.