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

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

Um layout que cabe perfeitamente em português pode quebrar em alemão, cortar acentos dinamarqueses ou se inverter errado em árabe. Veja como desenhar tipografia que sobrevive à tradução.

## The short version

- O texto traduzido costuma ser mais longo que o original em inglês, e rótulos curtos são os que mais crescem, então os layouts precisam de espaço para se expandir.
- Uma fonte multilíngue precisa conter todos os caracteres e alfabetos que você vai publicar, inclusive acentos como å, ø, ß, ã e œ.
- Árabe e hebraico correm da direita para a esquerda, as letras árabes se ligam e nenhum dos dois alfabetos tem maiúsculas, então espaçamento entre letras e truques de caixa alta não funcionam.
- Grandes famílias como Noto e IBM Plex cobrem muitos alfabetos com um desenho comum, o que mantém a marca consistente entre idiomas.
- Marque idioma e direção no HTML com os atributos lang e dir, para os navegadores escolherem a forma das letras, a hifenização e as quebras de linha certas.

**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](https://www.w3.org/International/articles/article-text-size) explica por quê. Aqui estão alguns rótulos do dia a dia em idiomas 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 |

Compostos alemães formam palavras únicas e longas que não quebram de linha. O finlandês às vezes é mais curto, às vezes muito mais longo. Desenhe para a mais longa, não para a média.

Um post vertical para redes sociais anunciando funcionamento até tarde às sextas, em português, com bastante espaço em volta do título

A frase em português cabe com folga em duas linhas, com espaço em volta.

O mesmo post em alemão, com título e sobretítulo mais longos ainda cabendo no layout

A versão em alemão pede mais largura e um sobretítulo mais longo. Um layout feito com folga absorve isso.

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

| Família | Alfabetos cobertos | Boa para |
| --- | --- | --- |
| Noto Sans e Noto Serif | Latino, cirílico, grego, árabe, hebraico, devanágari, tailandês, chinês, japonês, coreano e muitos mais | A cobertura mais ampla com visual comum |
| IBM Plex | Latino, cirílico, grego, árabe, hebraico, devanágari, tailandês, japonês, coreano | Marcas que querem uma só família em todo lugar |
| Inter | Latino, cirílico, grego, vietnamita | Interfaces em idiomas europeus |
| Source Sans 3 com Source Han Sans | Latino, cirílico, grego, mais chinês, japonês, coreano | Combinar latino com texto do Leste Asiático |
| Readex Pro, Cairo, Tajawal | Árabe e latino | Marcas que priorizam o árabe com suporte a latino |

Famílias desenhadas para vários alfabetos mantêm espessura de traço e proporções consistentes, então a marca parece ela mesma em todos os idiomas.

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

### Evite

- Espaçar as letras do texto árabe, o que quebra as ligações entre elas
- Simular ênfase com maiúsculas, que o árabe não tem
- Espelhar um layout latino sem conferir ícones, números e logos
- Árabe no mesmo tamanho de pontos que o latino, que muitas vezes parece menor
- Entrelinha tão apertada que pontos e sinais se chocam

### Faça

- Use peso ou cor para dar ênfase
- Inverta a direção do layout para a leitura começar pela direita
- Mantenha logos, controles de mídia e telefones na direção habitual
- Aumente o árabe até igualar visualmente o latino
- Dê boa altura de linha para os sinais acima e abaixo

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](https://gradiently.design/pt-br/guide/line-height-and-line-length) trazem o básico; o [texto em caixa alta](https://gradiently.design/pt-br/guide/all-caps-typography) pede cuidado extra aqui.

| Idioma | 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ä |
| Holandês e italiano | IJsland, città, perché |

Cole estes textos em um título com a sua entrelinha mais apertada. Se algum sinal tocar a linha de cima ou for cortado, afrouxe o espaçamento.

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

lang escolhe a fonte e a hifenização por idioma; dir define a direção de leitura; padding-inline-start cai à direita no árabe e à esquerda no português.

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

## Um fluxo para desenhar em vários idiomas

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. **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. **Teste os acentos mais pesados** Passe os textos de teste acima por todos os estilos de título.
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](https://gradiently.design/pt-br/guide/custom-fonts-upload) e [usar o Gradiently em outros idiomas](https://gradiently.design/pt-br/guide/languages-in-gradiently) explicam os dois.

## FAQ

### O que é tipografia multilíngue?

É compor texto para funcionar em todos os idiomas que você publica: fontes que cubram cada alfabeto, layouts com espaço para traduções mais longas e direção e quebra de linha corretas.

### Quais fontes suportam mais idiomas?

A família Noto cobre a maior variedade de alfabetos. A IBM Plex também cobre latino, cirílico, grego, árabe, hebraico, devanágari, tailandês, japonês e coreano.

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

Depende do idioma e do trecho. Rótulos curtos crescem mais e podem dobrar de tamanho, enquanto parágrafos longos crescem menos, então teste com traduções reais.

### Posso espaçar as letras do texto árabe?

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

### Como deixo um site da direita para a esquerda?

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