Consideraciones al elegir fuentes para un sitio web multilingüe

Como desarrollador front-end que trabaja para clientes de todo el mundo, siempre me ha costado lidiar con sitios web multilingües, especialmente en los casos en los que se utilizan tanto de derecha a izquierda (RTL) como de izquierda a derecha (LTR). Dicho esto, aprendí algunas cosas a lo largo del camino y compartiré algunos consejos en esta publicación.

Trabajemos en árabe e inglés, no sólo porque el árabe es mi lengua materna, sino porque es un ejemplo clásico de RTL en uso.

Agregar soporte RTL a un sitio

Sin embargo, antes de esto, queremos agregar soporte para un lenguaje RTL en nuestro sitio. Hay dos formas de hacerlo, y ninguna de ellas es exactamente ideal.

No es ideal: use una fuente específica para cada dirección

La primera forma en que podríamos hacer esto es confiar en el atributo de dirección (dir) en cualquier elemento dado (que generalmente es el elemento html por lo que establece la dirección globalmente):

/* For LTR, use Roboto */[dir=ltr] body {  font-family: "Roboto", sans-serif;}/* For RTL, use Amiri */[dir=rtl] body {  font-family: "Amiri", sans-serif;}

PostCSS-RTL hace que sea aún más fácil generar estilos para cada dirección, pero el problema con este método es que solo estás usando una fuente, lo cual no es ideal si tienes varios idiomas en un párrafo.

Este es el por qué. Descubrirá que los párrafos multilingües estropean la interfaz de usuario porque los glifos árabes reciben una fuente predeterminada que no se alinea con el elemento.

Puede que sea peor en algunos navegadores que en otros.

Tampoco es ideal: utilice una única fuente que admita ambos idiomas.

La segunda opción podría ser utilizar fuentes que ofrezcan soporte para ambas direcciones . Sin embargo, en mi experiencia personal, usar una sola fuente para ambos idiomas limita la creatividad y la libertad de usar una fuente diferente para cada dirección. Puede que no sea tan malo, dependiendo de los requisitos de diseño. Pero definitivamente he trabajado en proyectos en los que marca la diferencia.

Bien, ¿y entonces qué?

Necesitamos una solución más sencilla. Según MDN :

La selección de fuentes no se detiene simplemente en la primera fuente de la lista que se encuentra en el sistema del usuario. Más bien, la selección de fuentes se realiza un carácter a la vez, de modo que si una fuente disponible no tiene un glifo para un carácter necesario, se prueban las últimas fuentes.

Es decir, aún podemos usar la propiedad font-family pero usando un respaldo en los casos en que la primera fuente no tiene un glifo para un carácter. En realidad, esto resuelve los dos problemas anteriores: ¡dos pájaros de un tiro!

body {  font-family: 'Roboto', 'Amiri', 'Galada', sans-serif;}

¿Por qué funciona esto?

Al igual que Flexbox y CSS Grid hacen que los diseños CSS sean mucho más flexibles, el algoritmo de coincidencia de fuentes hace que sea aún más fácil trabajar con contenido en diferentes idiomas. Esto es lo que dice el W3C sobre la coincidencia de caracteres con fuentes:

Cuando el texto contiene caracteres como marcas combinadas, lo ideal es que el carácter base se represente utilizando la misma fuente que la marca, esto asegura la ubicación adecuada de la marca. Por esta razón, el algoritmo de coincidencia de fuentes para grupos es más especializado que el caso general de hacer coincidir un solo carácter por sí solo. Para secuencias que contienen selectores de variación, que indican el glifo preciso que se usará para un carácter determinado, los agentes de usuario siempre intentan recurrir a la fuente del sistema para encontrar el glifo apropiado antes de usar el glifo predeterminado del carácter base.

(El énfasis es mío)

¿Y cómo se combinan las fuentes? La especificación describe los pasos que sigue el algoritmo, que parafraseará aquí.

• El navegador mira un grupo de texto e intenta hacer coincidirlo con la lista de fuentes declaradas en CSS.
• Si encuentra una fuente que admita todos los caracteres, ¡genial! Eso es lo que se acostumbra.
• Si el navegador no encuentra una fuente que admita todos los caracteres, vuelve a leer la lista de fuentes para encontrar una que admita los caracteres no coincidentes y la aplica a esos caracteres específicos.
• Si el navegador no encuentra una fuente en la lista que no coincida con todos los caracteres del grupo ni con los individuales, busca la fuente predeterminada del sistema y comprueba que admita todos los caracteres.
• Si la fuente predeterminada del sistema coincide, nuevamente, ¡genial! Eso es lo que se acostumbra.
• Si la fuente del sistema no funciona, ahí es donde el navegador muestra un glifo roto.

Hablemos de rendimiento

La secuencia que acabamos de ver podría afectar el rendimiento de un sitio. Imagine que el navegador tiene que recorrer cada respaldo definido, hacer coincidir caracteres específicos con glifos y descargar archivos de fuentes según lo que encuentre. Eso puede suponer mucho trabajo, sin mencionar FOUT y otras rarezas de renderizado.

El objetivo es permitir que el algoritmo de coincidencia de fuentes decida qué fuente aplicar a cada texto en lugar de depender de una fuente para ambos idiomas o agregar CSS adicional para manejar diferentes direcciones. Si una fuente nunca se aplica a nada (digamos que una página en particular está en RTL y resulta que no tiene ningún texto LTR, o viceversa), la fuente más abajo en la pila que no se usa nunca se descarga.

Para que esto suceda es necesario seleccionar buenas fuentes multilingües. Las buenas fuentes multilingües son aquellas que tienen glifos para tantos caracteres como usted prevé usar en una página. Y si no puede encontrar una que las admita todas, usar una que admita la mayoría de ellas y luego recurrir a otra fuente que sí las admita es una manera eficiente de hacerlo. Si esa es la fuente predeterminada del sistema, es igual de bueno porque es un archivo de fuente menos descargado.

Lo bueno de dejar que la propiedad font-family decida la fuente para cada glifo (en lugar de crear selectores CSS adicionales para cada dirección) es que el comportamiento ya existe como describimos anteriormente; simplemente necesitamos usarlo.