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

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 explica por qué. Aquí tienes algunas etiquetas cotidianas de idiomas que una marca europea suele necesitar.

• 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 y en la mayoría de las páginas de las fundiciones.

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

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 cubre lo básico; el texto en mayúsculas necesita aquí un cuidado extra.

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

Los detalles de dir y del algoritmo bidireccional están en MDN.

Un método para diseñar en muchos idiomas

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

   Prueba los acentos más pesados

   Pasa las cadenas de prueba de arriba por cada estilo de encabezado.

4. 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 y usar Gradiently en otros idiomas explican ambas cosas.