Tipografia multilingue: font, scritture e parole più lunghe

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 ne spiega il perché. Ecco alcune etichette quotidiane in lingue che un brand europeo spesso deve coprire.

• 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 e nella maggior parte delle pagine delle fonderie.

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, 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.

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 spiega le basi; il testo tutto maiuscolo richiede qui una cura in più.

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

I dettagli di dir e dell’algoritmo bidirezionale sono su MDN.

Un metodo per progettare in molte lingue

1. 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. 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. 3

   Prova gli accenti più pesanti

   Passa le stringhe di prova qui sopra in ogni stile di titolo.

4. 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 e usare Gradiently in altre lingue spiegano entrambe le cose.