# Tipografia multilingue: tipos de letra e palavras longas

[Canonical HTML page](https://gradiently.design/pt-pt/guide/arabic-and-multilingual-type)

Uma composição que serve perfeitamente em inglês pode partir-se em alemão, cortar os acentos dinamarqueses ou inverter-se mal em árabe. Eis como desenhar texto que sobrevive à tradução.

## The short version

- O texto traduzido costuma ser mais longo do que o inglês, e as etiquetas curtas são as que mais crescem, por isso as composições precisam de espaço para se expandir.
- Um tipo de letra multilingue tem de conter todos os caracteres e escritas que vais publicar, incluindo acentos como å, ø, ß, ã e œ.
- O árabe e o hebraico correm da direita para a esquerda, as letras árabes ligam-se e nenhuma das escritas tem maiúsculas, por isso o espaçamento entre letras e os truques de maiúsculas não se transferem.
- Famílias grandes como a Noto e a IBM Plex cobrem muitas escritas com um desenho partilhado, o que mantém a marca consistente entre línguas.
- Marca a língua e a direção no HTML com os atributos lang e dir para os navegadores escolherem a modelação, a hifenização e as quebras de linha certas.

**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](https://www.w3.org/International/articles/article-text-size) explica porquê. Aqui ficam algumas etiquetas do dia a dia em línguas de que uma marca europeia costuma precisar.

| Inglês | Alemão | Francês | Finlandês | Espanhol |
| --- | --- | --- | --- | --- |
| Settings | Einstellungen | Paramètres | Asetukset | Ajustes |
| Download | Herunterladen | Télécharger | Lataa | Descargar |
| Opening hours | Öffnungszeiten | Horaires d'ouverture | Aukioloajat | Horario de apertura |
| Book now | Jetzt buchen | Réserver | Varaa nyt | Reservar ahora |

Os compostos alemães formam palavras únicas e longas que não quebram. O finlandês é por vezes mais curto, por vezes muito mais longo. Desenha para o mais longo, não para a média.

Um post vertical a anunciar a abertura até tarde à sexta-feira, em português, com bastante espaço à volta do título

A linha em português cabe confortavelmente em duas linhas, com espaço à volta.

O mesmo post em alemão, com um título e um sobretítulo mais longos que ainda cabem na composição

A versão alemã precisa de mais largura e de um sobretítulo mais longo. Uma composição feita com folga absorve-o.

- 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](https://fonts.google.com/) e na maioria das páginas das fundições.

| Família | Escritas cobertas | Bom para |
| --- | --- | --- |
| Noto Sans e Noto Serif | Latim, cirílico, grego, árabe, hebraico, devanágari, tailandês, chinês, japonês, coreano e muitas mais | A cobertura mais ampla com um aspeto partilhado |
| IBM Plex | Latim, cirílico, grego, árabe, hebraico, devanágari, tailandês, japonês, coreano | Marcas que querem uma só família em todo o lado |
| Inter | Latim, cirílico, grego, vietnamita | Interfaces em línguas europeias |
| Source Sans 3 com Source Han Sans | Latim, cirílico, grego, mais chinês, japonês, coreano | Combinar latim com texto da Ásia Oriental |
| Readex Pro, Cairo, Tajawal | Árabe e latim | Marcas com o árabe em primeiro lugar e suporte para latim |

As famílias desenhadas para várias escritas mantêm a espessura do traço e as proporções consistentes, para a marca parecer ela própria em todas as línguas.

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](https://gradiently.design/pt-pt/guide/font-pairing), 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.

### Evita

- Espaçar as letras do texto árabe, o que quebra as ligações entre elas
- Fingir ênfase com maiúsculas, que o árabe não tem
- Espelhar uma composição latina sem verificar ícones, números e logótipos
- Árabe composto no mesmo corpo do latim, o que muitas vezes parece mais pequeno
- Entrelinha tão apertada que pontos e sinais colidem

### Faz

- Usa o peso ou a cor para dar ênfase
- Inverte a direção da composição para a leitura começar à direita
- Mantém logótipos, controlos multimédia e números de telefone na direção habitual
- Aumenta o árabe até igualar visualmente o latim
- Deixa uma altura de linha generosa para os sinais por cima e por baixo

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](https://gradiently.design/pt-pt/guide/line-height-and-line-length) trata do essencial; o [texto em maiúsculas](https://gradiently.design/pt-pt/guide/all-caps-typography) pede aqui cuidado extra.

| Língua | Texto de teste |
| --- | --- |
| Francês | Été, Œuvre, ÇA, déjà |
| Alemão | ÄÖÜ, Straße, Größe |
| Espanhol | ¿Mañana? ¡Sí! |
| Português | Ação, Coração, São |
| Dinamarquês e norueguês | Æble, Øre, Århus, blåbær |
| Sueco e finlandês | Åsa, Älvsjö, Hyvää yötä |
| Neerlandês e italiano | IJsland, città, perché |

Cola estes textos num título com a tua entrelinha mais apertada. Se algum sinal tocar na linha de cima ou ficar cortado, afrouxa o espaçamento.

## 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
<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>
```

O lang escolhe o tipo de letra e a hifenização por língua; o dir define a direção de leitura; o padding-inline-start fica à direita em árabe e à esquerda em inglês.

Os pormenores do `dir` e do algoritmo bidirecional estão na [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).

## Um fluxo de trabalho para desenhar em muitas línguas

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. **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. **Testa os acentos mais pesados** Passa os textos de teste acima por todos os estilos de título.
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](https://gradiently.design/pt-pt/guide/custom-fonts-upload) e [usar o Gradiently noutras línguas](https://gradiently.design/pt-pt/guide/languages-in-gradiently) explicam as duas coisas.

## FAQ

### O que é a tipografia multilingue?

Compor texto para funcionar em todas as línguas que publicas: tipos de letra que cubram cada escrita, composições com espaço para traduções mais longas e direção e quebra de linha corretas.

### Que tipos de letra suportam mais línguas?

A família Noto cobre a gama mais ampla de escritas. A IBM Plex também cobre latim, cirílico, grego, árabe, hebraico, devanágari, tailandês, japonês e coreano.

### Quanto mais longas são as traduções do que o inglês?

Varia consoante a língua e a frase. As etiquetas curtas são as que mais crescem e podem duplicar de comprimento, enquanto os parágrafos longos crescem menos, por isso testa com traduções reais.

### Posso acrescentar espaçamento entre letras ao texto árabe?

Não. As letras árabes ligam-se umas às outras e o espaçamento quebra essas ligações. Usa antes peso, tamanho ou cor para dar ênfase.

### Como faço um site da direita para a esquerda?

Define dir="rtl" e o lang certo no elemento html e usa propriedades CSS lógicas, como padding-inline-start, para o espaçamento se inverter com a direção.