# Tipografia multilingue: font, scritture e parole più lunghe

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

Un layout che va a pennello in inglese può rompersi in tedesco, tagliare gli accenti danesi o invertirsi male in arabo. Ecco come progettare un testo che sopravvive alla traduzione.

## The short version

- Il testo tradotto è di solito più lungo dell’inglese, e le etichette brevi crescono di più, quindi i layout devono avere spazio per espandersi.
- Un font multilingue deve contenere ogni carattere e scrittura che pubblicherai, compresi accenti come å, ø, ß, ã e œ.
- L’arabo e l’ebraico si leggono da destra a sinistra, le lettere arabe si uniscono e nessuna delle due scritture ha le maiuscole, quindi la spaziatura tra le lettere e i trucchi del maiuscolo non valgono.
- Grandi famiglie come Noto e IBM Plex coprono molte scritture con un design condiviso, e questo mantiene coerente un brand in tutte le lingue.
- Indica lingua e direzione in HTML con gli attributi lang e dir, così i browser scelgono la corretta modellazione dei glifi, la sillabazione e le interruzioni di riga.

La **tipografia multilingue** è l’arte di comporre testi che funzionano in ogni lingua che pubblichi, non solo in quella in cui hai progettato. In pratica si riduce a quattro abitudini: lasciare spazio a traduzioni più lunghe dell’inglese, scegliere font che contengano davvero ogni scrittura e accento che ti serve, rispettare il modo in cui ogni scrittura si legge (l’arabo e l’ebraico vanno da destra a sinistra, il cinese e il giapponese non hanno spazi) e provare testo tradotto vero, non testo segnaposto. Se fai bene queste cose, un solo sistema di design può portare un brand attraverso una dozzina di lingue.

## Prevedi parole più lunghe

La maggior parte delle lingue europee richiede più spazio dell’inglese. L’effetto è più forte sulle stringhe brevi: un pulsante di una parola può raddoppiare, mentre un lungo paragrafo cresce molto meno. La nota del W3C sulla [dimensione del testo nelle traduzioni](https://www.w3.org/International/articles/article-text-size) ne spiega il perché. Ecco alcune etichette quotidiane in lingue che un brand europeo spesso deve coprire.

| Inglese | Tedesco | Francese | Finlandese | Spagnolo |
| --- | --- | --- | --- | --- |
| 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 |

I composti tedeschi formano singole parole lunghe che non vanno a capo. Il finlandese a volte è più corto, a volte molto più lungo. Progetta per il più lungo, non per la media.

Post social verticale che annuncia l’apertura serale del venerdì in italiano, con ampio spazio intorno al titolo

La riga in italiano sta comodamente su due righe con spazio tutt’intorno.

Lo stesso post in tedesco, con titolo ed etichetta più lunghi che stanno comunque nel layout

La versione tedesca ha bisogno di più larghezza e di un’etichetta più lunga. Un layout costruito con un po’ di margine la assorbe.

- Lascia che i titoli vadano a capo su una riga in più invece di bloccarli su una sola.
- Dimensiona pulsanti ed etichette sul contenuto, mai su una larghezza fissa.
- Tieni un terzo o più di spazio libero nelle etichette e nelle intestazioni brevi.
- Evita le parole disposte lettera per lettera, come un’etichetta verticale, che non possono riadattarsi.

## Scegli font che coprono ogni scrittura

Prima di innamorarti di un carattere, controlla il suo set di caratteri. Un font che non ha un carattere passa a un altro font per quella sola lettera, quindi un titolo danese può ritrovarsi con una ø di un design diverso. I font elencano le lingue supportate su [Google Fonts](https://fonts.google.com/) e nella maggior parte delle pagine delle fonderie.

| Famiglia | Scritture coperte | Adatta a |
| --- | --- | --- |
| Noto Sans e Noto Serif | Latino, cirillico, greco, arabo, ebraico, devanagari, thai, cinese, giapponese, coreano e molte altre | La copertura più ampia con un aspetto condiviso |
| IBM Plex | Latino, cirillico, greco, arabo, ebraico, devanagari, thai, giapponese, coreano | Brand che vogliono un’unica famiglia ovunque |
| Inter | Latino, cirillico, greco, vietnamita | Interfacce nelle lingue europee |
| Source Sans 3 con Source Han Sans | Latino, cirillico, greco, più cinese, giapponese, coreano | Abbinare il latino al testo dell’Asia orientale |
| Readex Pro, Cairo, Tajawal | Arabo e latino | Brand arabi con supporto al latino |

Le famiglie progettate per più scritture mantengono coerenti peso del tratto e proporzioni, così un brand somiglia a sé stesso in ogni lingua.

Dove una sola famiglia non copre tutto, abbina un carattere latino a uno specifico per la scrittura, di peso, altezza della x e tono simili. Valgono gli stessi principi dell’[abbinamento dei font](https://gradiently.design/it/guide/font-pairing), con uno in più: mettili fianco a fianco alla stessa dimensione e regola finché nessuno dei due sembra più piccolo.

## Tipografia araba e layout da destra a sinistra

L’arabo è la scrittura in cui le abitudini latine falliscono in modo più evidente. Si legge da destra a sinistra, le lettere cambiano forma a seconda della posizione nella parola e si uniscono alle vicine, e non ci sono maiuscole. Anche l’ebraico va da destra a sinistra, ma le sue lettere non si uniscono.

### Evita

- Spaziare le lettere del testo arabo, che spezza i legami tra le lettere
- Simulare l’enfasi con le maiuscole, che l’arabo non ha
- Specchiare un layout latino senza controllare icone, numeri e loghi
- Arabo composto allo stesso corpo del latino, che spesso sembra più piccolo
- Interlinea così stretta che punti e segni si scontrano

### Fai

- Usa peso o colore per dare enfasi
- Inverti la direzione del layout così la lettura parte da destra
- Mantieni loghi, controlli multimediali e numeri di telefono nella loro direzione abituale
- Ingrandisci l’arabo finché non corrisponde otticamente al latino
- Lascia un’interlinea generosa per i segni sopra e sotto

Gli stili cufici sono geometrici e vanno bene per titoli e loghi; gli stili naskh sono più rotondi e si leggono meglio nei testi lunghi. Noto Kufi Arabic e Noto Naskh Arabic ti danno entrambi in una sola famiglia.

## Accenti, segni diacritici e interlinea

Le lingue europee aggiungono segni sopra e sotto le lettere: Å in svedese, danese e norvegese, É in francese, Ä e Ö in finlandese e tedesco, Ç in portoghese. Un’interlinea stretta, che sembra incisiva nelle maiuscole inglesi, taglia questi segni o li fa scontrare con la riga sopra. Prova i titoli con le maiuscole accentate più pesanti prima di fissare la spaziatura. [L’interlinea](https://gradiently.design/it/guide/line-height-and-line-length) spiega le basi; [il testo tutto maiuscolo](https://gradiently.design/it/guide/all-caps-typography) richiede qui una cura in più.

| Lingua | Stringa di prova |
| --- | --- |
| Francese | Été, Œuvre, ÇA, déjà |
| Tedesco | ÄÖÜ, Straße, Größe |
| Spagnolo | ¿Mañana? ¡Sí! |
| Portoghese | Ação, Coração, São |
| Danese e norvegese | Æble, Øre, Århus, blåbær |
| Svedese e finlandese | Åsa, Älvsjö, Hyvää yötä |
| Olandese e italiano | IJsland, città, perché |

Incolla queste stringhe in un titolo con l’interlinea più stretta che usi. Se un segno tocca la riga sopra o viene tagliato, allarga la spaziatura.

## Tipografia multilingue in CSS

Sul web, di’ al browser in che lingua e direzione è ogni pagina o brano. Così sceglie le forme delle lettere, la sillabazione, le virgolette e le interruzioni di riga corrette. Usa le proprietà logiche in modo che la spaziatura si inverta da sola con la direzione.

```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 sceglie font e sillabazione per lingua; dir imposta la direzione di lettura; padding-inline-start cade a destra in arabo e a sinistra in inglese.

I dettagli di `dir` e dell’algoritmo bidirezionale sono su [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).

## Un metodo per progettare in molte lingue

1. **Elenca ogni lingua e scrittura** Scrivi cosa pubblichi oggi e cosa potresti aggiungere. Scegli i font in base a quell’elenco, non solo in base all’inglese.
2. **Progetta con la tua lingua più lunga** Prepara prima le schermate e i post chiave in tedesco o finlandese. Se ci stanno, l’inglese ci starà.
3. **Prova gli accenti più pesanti** Passa le stringhe di prova qui sopra in ogni stile di titolo.
4. **Fai guardare a un madrelingua** Interruzioni di riga, sillabazione e tono possono essere tecnicamente validi e suonare comunque sbagliati. Chi legge la lingua nota ciò che gli strumenti non vedono.

L’interfaccia di Gradiently parla 12 lingue, dall’inglese al francese e al tedesco fino al danese, al norvegese e al finlandese, così un team può lavorare nella lingua in cui pensa. Con Pro, il brand kit accetta file di font caricati per titoli e testo, quindi puoi aggiungere un carattere che copra i tuoi accenti, e i nuovi design partono con quello. [Caricare font personalizzati](https://gradiently.design/it/guide/custom-fonts-upload) e [usare Gradiently in altre lingue](https://gradiently.design/it/guide/languages-in-gradiently) spiegano entrambe le cose.

## FAQ

### Cos’è la tipografia multilingue?

Comporre il testo in modo che funzioni in ogni lingua che pubblichi: font che coprono ogni scrittura, layout con spazio per traduzioni più lunghe e direzione e interruzioni di riga corrette.

### Quali font supportano più lingue?

La famiglia Noto copre la gamma più ampia di scritture. Anche IBM Plex copre latino, cirillico, greco, arabo, ebraico, devanagari, thai, giapponese e coreano.

### Quanto sono più lunghe le traduzioni rispetto all’inglese?

Dipende dalla lingua e dalla stringa. Le etichette brevi crescono di più e possono raddoppiare, mentre i paragrafi lunghi crescono meno, quindi prova con traduzioni vere.

### Posso aggiungere spaziatura tra le lettere al testo arabo?

No. Le lettere arabe si uniscono tra loro, e la spaziatura spezza quei legami. Usa invece peso, dimensione o colore per dare enfasi.

### Come faccio un sito da destra a sinistra?

Imposta dir="rtl" e il lang giusto sull’elemento html, e usa proprietà CSS logiche come padding-inline-start così la spaziatura si inverte con la direzione.