# Tipografía multilingüe: fuentes, escrituras y textos largos

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

Una composición que encaja a la perfección en español puede romperse en alemán, recortar los acentos daneses o invertirse mal en árabe. Así se diseña una tipografía que sobrevive a la traducción.

## The short version

- El texto traducido suele ser más largo que el inglés, y las etiquetas cortas son las que más crecen, así que las composiciones necesitan margen para expandirse.
- Una fuente multilingüe debe contener todos los caracteres y escrituras que vayas a publicar, incluidos acentos como å, ø, ß, ã y œ.
- El árabe y el hebreo se leen de derecha a izquierda, las letras árabes se unen y ninguna de las dos escrituras usa mayúsculas, así que el espaciado entre letras y los trucos de mayúsculas no se trasladan.
- Familias grandes como Noto e IBM Plex cubren muchas escrituras con un diseño compartido, lo que mantiene la coherencia de una marca entre idiomas.
- Marca el idioma y la dirección en HTML con los atributos lang y dir para que los navegadores elijan la composición de glifos, la separación silábica y los saltos de línea correctos.

La **tipografía multilingüe** es el oficio de componer texto que funcione en todos los idiomas que publicas, no solo en el que usaste al diseñar. En la práctica se reduce a cuatro hábitos: dejar espacio para traducciones más largas que el inglés, elegir fuentes que realmente contengan todas las escrituras y acentos que necesitas, respetar cómo se lee cada escritura (el árabe y el hebreo van de derecha a izquierda, el chino y el japonés no llevan espacios) y probar con texto traducido real en lugar de texto de relleno. Si lo haces bien, un solo sistema de diseño puede llevar una marca a una docena de idiomas.

## Prevé palabras más largas

La mayoría de los idiomas europeos ocupan más espacio que el inglés. El efecto es más fuerte en las cadenas cortas: un botón de una palabra puede duplicarse, mientras que un párrafo largo crece mucho menos. La nota del W3C sobre el [tamaño del texto en la traducción](https://www.w3.org/International/articles/article-text-size) explica por qué. Aquí tienes algunas etiquetas cotidianas de idiomas que una marca europea suele necesitar.

| Inglés | Alemán | Francés | Finés | Español |
| --- | --- | --- | --- | --- |
| 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 |

Los compuestos alemanes forman palabras largas únicas que no se pueden partir. El finés a veces es más corto y a veces mucho más largo. Diseña para el más largo, no para la media.

Una publicación social vertical que anuncia la apertura hasta tarde los viernes, en inglés, con mucho espacio alrededor del titular

La línea en inglés cabe cómodamente en dos líneas con espacio alrededor.

La misma publicación en alemán, con un titular y una sobreetiqueta más largos que siguen cabiendo en la composición

La versión alemana necesita más ancho y una sobreetiqueta más larga. Una composición con holgura lo absorbe.

- Deja que los titulares pasen a una línea extra en lugar de fijarlos a una sola.
- Ajusta botones y etiquetas a su contenido, nunca a un ancho fijo.
- Deja un tercio o más de espacio libre en las etiquetas y sobreetiquetas cortas.
- Evita las palabras colocadas letra a letra, como una etiqueta vertical, que no pueden reajustarse.

## Elige fuentes que cubran todas las escrituras

Antes de enamorarte de una tipografía, revisa su juego de caracteres. Una fuente que carece de un carácter recurre a otra solo para esa letra, así que un titular en danés puede acabar con una ø de otro diseño. Las fuentes indican los idiomas que admiten en [Google Fonts](https://fonts.google.com/) y en la mayoría de las páginas de las fundiciones.

| Familia | Escrituras que cubre | Buena para |
| --- | --- | --- |
| Noto Sans y Noto Serif | Latín, cirílico, griego, árabe, hebreo, devanagari, tailandés, chino, japonés, coreano y muchas más | La cobertura más amplia con un aspecto compartido |
| IBM Plex | Latín, cirílico, griego, árabe, hebreo, devanagari, tailandés, japonés, coreano | Marcas que quieren una sola familia en todas partes |
| Inter | Latín, cirílico, griego, vietnamita | Interfaces en idiomas europeos |
| Source Sans 3 con Source Han Sans | Latín, cirílico, griego, además de chino, japonés y coreano | Combinar latín con texto de Asia oriental |
| Readex Pro, Cairo, Tajawal | Árabe y latín | Marcas con el árabe en primer lugar y apoyo del latín |

Las familias diseñadas para varias escrituras mantienen coherentes el grosor del trazo y las proporciones, de modo que una marca se parece a sí misma en todos los idiomas.

Cuando una familia no puede cubrirlo todo, combina una tipografía latina con otra específica de la escritura, de peso, altura de x y tono parecidos. Valen los mismos principios que en [combinar fuentes](https://gradiently.design/es/guide/font-pairing), con uno más: colócalas lado a lado al mismo tamaño y ajusta hasta que ninguna parezca más pequeña.

## Tipografía árabe y composiciones de derecha a izquierda

El árabe es la escritura en la que más se notan los fallos de los hábitos latinos. Se lee de derecha a izquierda, las letras cambian de forma según su posición en la palabra y se unen a las vecinas, y no hay mayúsculas. El hebreo también va de derecha a izquierda, pero sus letras no se unen.

### Evita

- Espaciar entre letras el texto árabe, lo que rompe las uniones entre letras
- Fingir énfasis con mayúsculas, que el árabe no tiene
- Reflejar una composición latina sin revisar iconos, números y logotipos
- Componer el árabe al mismo tamaño en puntos que el latín, que suele verse más pequeño
- Un interlineado tan ajustado que los puntos y las marcas chocan

### Haz

- Usa el peso o el color para dar énfasis
- Invierte la dirección de la composición para que la lectura empiece por la derecha
- Mantén los logotipos, los controles multimedia y los números de teléfono en su dirección habitual
- Aumenta el árabe hasta que visualmente iguale al latín
- Deja un interlineado generoso para las marcas por encima y por debajo

Los estilos kufi son geométricos y van bien en titulares y logotipos; los estilos naskh son más redondeados y se leen mejor en textos largos. Noto Kufi Arabic y Noto Naskh Arabic te ofrecen ambos en una sola familia.

## Acentos, diacríticos e interlineado

Los idiomas europeos añaden marcas por encima y por debajo de las letras: Å en sueco, danés y noruego, É en francés, Ä y Ö en finés y alemán, Ç en portugués. Un interlineado ajustado, que luce nítido en mayúsculas inglesas, recorta estas marcas o las hace chocar con la línea de arriba. Prueba los titulares con tus mayúsculas acentuadas más pesadas antes de fijar el espaciado. [Interlineado](https://gradiently.design/es/guide/line-height-and-line-length) cubre lo básico; el [texto en mayúsculas](https://gradiently.design/es/guide/all-caps-typography) necesita aquí un cuidado extra.

| Idioma | Cadena de prueba |
| --- | --- |
| Francés | Été, Œuvre, ÇA, déjà |
| Alemán | ÄÖÜ, Straße, Größe |
| Español | ¿Mañana? ¡Sí! |
| Portugués | Ação, Coração, São |
| Danés y noruego | Æble, Øre, Århus, blåbær |
| Sueco y finés | Åsa, Älvsjö, Hyvää yötä |
| Neerlandés e italiano | IJsland, città, perché |

Pega estas cadenas en un titular con tu interlineado más ajustado. Si alguna marca toca la línea de arriba o queda cortada, abre el espaciado.

## Tipografía multilingüe en CSS

En la web, indica al navegador el idioma y la dirección de cada página o pasaje. Así elige las formas de letra, la separación silábica, las comillas y los saltos de línea correctos. Usa propiedades lógicas para que el espaciado se invierta solo con la dirección.

```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 elige la fuente y la separación silábica según el idioma; dir fija la dirección de lectura; padding-inline-start cae a la derecha en árabe y a la izquierda en español.

Los detalles de `dir` y del algoritmo bidireccional están en [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).

## Un método para diseñar en muchos idiomas

1. **Haz una lista de todos los idiomas y escrituras** Anota lo que publicas hoy y lo que podrías añadir. Elige las fuentes según esa lista, no solo según el español.
2. **Diseña con tu idioma más largo** Maqueta primero las pantallas y publicaciones clave en alemán o finés. Si caben, el español también.
3. **Prueba los acentos más pesados** Pasa las cadenas de prueba de arriba por cada estilo de encabezado.
4. **Pide a un lector nativo que lo revise** Los saltos de línea, la separación silábica y el tono pueden ser técnicamente válidos y aun así sonar mal. Un lector con fluidez detecta lo que las herramientas no.

La propia interfaz de Gradiently habla 12 idiomas, del inglés, el francés y el alemán al danés, el noruego y el finés, así que un equipo puede trabajar en el idioma en que piensa. En Pro, el kit de marca admite archivos de fuente propios para títulos y cuerpo, de modo que puedes añadir una tipografía que cubra tus acentos, y los nuevos diseños empiezan con ella. [Subir fuentes propias](https://gradiently.design/es/guide/custom-fonts-upload) y [usar Gradiently en otros idiomas](https://gradiently.design/es/guide/languages-in-gradiently) explican ambas cosas.

## FAQ

### ¿Qué es la tipografía multilingüe?

Componer el texto para que funcione en todos los idiomas que publicas: fuentes que cubran cada escritura, composiciones con espacio para traducciones más largas y dirección y saltos de línea correctos.

### ¿Qué fuentes admiten más idiomas?

La familia Noto cubre el abanico más amplio de escrituras. IBM Plex también cubre latín, cirílico, griego, árabe, hebreo, devanagari, tailandés, japonés y coreano.

### ¿Cuánto más largas son las traducciones que el inglés?

Depende del idioma y de la cadena. Las etiquetas cortas son las que más crecen y pueden duplicar su longitud, mientras que los párrafos largos crecen menos, así que prueba con traducciones reales.

### ¿Puedo añadir espaciado entre letras al texto árabe?

No. Las letras árabes se unen entre sí y el espaciado rompe esas uniones. Usa el peso, el tamaño o el color para dar énfasis.

### ¿Cómo hago que un sitio web vaya de derecha a izquierda?

Define dir="rtl" y el lang correcto en el elemento html, y usa propiedades CSS lógicas como padding-inline-start para que el espaciado se invierta con la dirección.