Tipografia multilingue: tipos de letra e palavras longas

Tipografia multilingue é a arte de compor texto que funciona em todas as línguas que publicas, e não apenas naquela em que desenhaste. Na prática resume-se a quatro hábitos: deixar espaço para traduções mais longas do que o inglês, escolher tipos de letra que realmente contenham todas as escritas e acentos de que precisas, respeitar a forma como cada escrita se lê (o árabe e o hebraico correm da direita para a esquerda, o chinês e o japonês não têm espaços) e testar texto traduzido a sério em vez de texto de preenchimento. Acertando nisto, um só sistema de design pode levar uma marca por uma dúzia de línguas.

Planeia para palavras mais longas

A maioria das línguas europeias ocupa mais espaço do que o inglês. O efeito é mais forte nas frases curtas: um botão de uma palavra pode duplicar, enquanto um parágrafo longo cresce muito menos. A nota do W3C sobre o tamanho do texto na tradução explica porquê. Aqui ficam algumas etiquetas do dia a dia em línguas de que uma marca europeia costuma precisar.

• Deixa os títulos quebrar para uma linha extra em vez de os fixares numa só.
• Dimensiona botões e etiquetas pelo conteúdo, nunca por uma largura fixa.
• Mantém um terço ou mais de espaço livre em etiquetas curtas e sobretítulos.
• Evita palavras dispostas letra a letra, como uma etiqueta vertical, que não se consegue reajustar.

Escolhe tipos de letra que cubram todas as escritas

Antes de te apaixonares por um tipo de letra, verifica o seu conjunto de caracteres. Um tipo de letra que não tem um caractere recorre a outro só para essa letra, e um título dinamarquês pode acabar com um ø num desenho diferente. Os tipos de letra indicam as línguas suportadas no Google Fonts e na maioria das páginas das fundições.

Quando uma só família não consegue cobrir tudo, combina um tipo de letra latino com um específico da escrita, de peso, altura do x e tom semelhantes. Aplicam-se os mesmos princípios de combinação de tipos de letra, com mais um: compõe-nos lado a lado ao mesmo tamanho e ajusta até nenhum parecer mais pequeno.

Tipografia árabe e composições da direita para a esquerda

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

Os estilos cúficos são geométricos e servem títulos e logótipos; os estilos naskh são mais redondos e leem-se melhor em texto longo. O Noto Kufi Arabic e o Noto Naskh Arabic dão-te os dois numa só família.

Acentos, diacríticos e altura de linha

As línguas europeias juntam sinais por cima e por baixo das letras: Å em sueco, dinamarquês e norueguês, É em francês, Ä e Ö em finlandês e alemão, Ç em português. Uma entrelinha apertada, que fica nítida em maiúsculas inglesas, corta estes sinais ou deixa-os chocar com a linha de cima. Testa os títulos com as tuas maiúsculas acentuadas mais pesadas antes de fixares o espaçamento. Altura de linha trata do essencial; o texto em maiúsculas pede aqui cuidado extra.

Tipografia multilingue em CSS

Na web, diz ao navegador em que língua e direção está cada página ou passagem. Ele escolhe então as formas de letra, a hifenização, as aspas e a quebra de linha certas. Usa propriedades lógicas para o espaçamento se inverter automaticamente 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 pormenores do dir e do algoritmo bidirecional estão na MDN.

Um fluxo de trabalho para desenhar em muitas línguas

1. 1

   Lista todas as línguas e escritas

   Escreve o que publicas hoje e o que poderás juntar. Escolhe os tipos de letra face a essa lista, não só face ao inglês.

2. 2

   Desenha com a tua língua mais longa

   Faz primeiro maquetas dos ecrãs e posts principais em alemão ou finlandês. Se couberem, o português também cabe.

3. 3

   Testa os acentos mais pesados

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

4. 4

   Pede a um leitor nativo que olhe

   As quebras de linha, a hifenização e o tom podem ser tecnicamente válidos e ainda assim parecer errados. Um leitor fluente apanha o que as ferramentas não apanham.

A própria interface do Gradiently fala 12 línguas, do inglês, francês e alemão ao dinamarquês, norueguês e finlandês, para uma equipa poder trabalhar na língua em que pensa. No Pro, o kit de marca aceita ficheiros de tipos de letra de título e de texto carregados, por isso podes juntar um que cubra os teus acentos, e os novos designs começam com ele. Carregar tipos de letra próprios e usar o Gradiently noutras línguas explicam as duas coisas.