Nuestra web nombraba siete tipografías. En un teléfono no se usaba ninguna
El CSS pedía una letra concreta y Android la cambia por la suya sin avisar. Lo encontramos en nuestra propia web, no en la de un cliente.
Esta web pedía una tipografía con serifa para sus titulares. Lo pedía bien, con una lista de siete nombres por orden de preferencia, que es como se ha hecho toda la vida:
ui-serif,
"Iowan Old Style",
"Palatino Linotype",
Palatino,
Georgia,
"Times New Roman",
serif
La idea es sensata: si el dispositivo tiene la primera, la usa; si no, prueba la siguiente. Siete oportunidades para acertar.
En un teléfono Android no se usaba ninguna de las siete. Ni la primera ni la última: el teléfono aplicaba su propia serifa, Noto Serif, que nadie había elegido.
No fallaba nada. La página cargaba, el texto se leía, ningún error en ninguna consola. Simplemente no era la letra que habíamos decidido, y llevaba semanas así.
Por qué pasa, y no es lo que parece
La explicación intuitiva sería «el teléfono no tiene esas fuentes, así que va bajando por la lista hasta la genérica del final». Es casi correcta y el matiz cambia todo.
Android no ignora esos nombres: los intercepta. En su archivo de configuración hay una tabla de equivalencias que redirige nombres de tipografías clásicas hacia las diez familias que sí trae declaradas. Estas ocho son textuales:
<alias name="georgia" to="serif" />
<alias name="palatino" to="serif" />
<alias name="times new roman" to="serif" />
<alias name="baskerville" to="serif" />
<alias name="arial" to="sans-serif" />
<alias name="helvetica" to="sans-serif" />
<alias name="verdana" to="sans-serif" />
<alias name="tahoma" to="sans-serif" />
Son 24 redirecciones en total, y ocho apuntan a la misma serifa.
La consecuencia práctica es incómoda: da igual el orden de tu lista y da igual su longitud. Si nombras Georgia, en Android obtienes Noto Serif — no porque se haya agotado la lista, sino porque tu petición se tradujo antes de llegar a ninguna parte. Escribir cuatro nombres clásicos produce exactamente el mismo resultado que escribir uno solo.
El mismo sitio, tres caras
Lo comprobamos nombre por nombre. Esa lista de siete produce:
| Dónde se abre | Qué letra sale |
|---|---|
| macOS | Iowan Old Style |
| Windows | Palatino Linotype |
| Android y Linux | Noto Serif — la del sistema |
Tres tipografías distintas para la misma página. Ninguna es fea y ninguna da error, pero solo una se eligió, y no es la que ve la mayoría de la gente que llega desde un teléfono.
Aquí eso importa más que en otros sitios. Cuando la mayor parte de las visitas entra desde un móvil —y en un mercado donde el teléfono es el ordenador de casi todo el mundo, entra desde un móvil—, la versión que «se ve bien en el escritorio del que la hizo» es justamente la que casi nadie mira.
Por qué nos pasó a nosotros
Merece la pena contarlo, porque el error no fue técnico sino de razonamiento.
La regla que teníamos escrita era «ninguna fuente externa», y es una buena regla: cargar tipografías desde el servidor de otra empresa añade una conexión a un dominio ajeno que bloquea el dibujado de la página, y quien lo paga es el visitante con datos móviles caros.
Solo que «ninguna fuente externa» se convirtió sin darnos cuenta en «ninguna fuente». Y no es lo mismo. Lo caro es la petición al servidor de otro; alojar el archivo en tu propio dominio no hace nada de eso: viaja por la misma conexión que ya está abierta, se guarda en la caché del navegador y no depende de que un tercero siga en pie.
Nuestra regla era correcta. La conclusión que sacamos de ella, no.
Qué hacen los que saben
Antes de decidir fuimos a mirar cómo lo resuelven nueve webs personales de referencia internacional. No leímos artículos sobre ellas: abrimos el CSS que sirven y miramos qué carga cada una.
Siete de las nueve alojan su propia tipografía. Ninguna la pide a un servidor ajeno. Las dos restantes usan letras del sistema, y lo hacen de forma coherente: nombran una genérica y no prometen una familia concreta que quizá no exista.
Es decir: quien se preocupa por el rendimiento no renuncia a elegir la letra. Renuncia a pedírsela a otro.
Cuánto cuesta hacerlo bien
Una tipografía bien preparada para web —un solo grosor, y recortada para incluir solo los caracteres del idioma— pesa unos 20 KB. Es aproximadamente lo que ocupa una foto pequeña.
Las tres cosas que la hacen barata, y que casi nunca se hacen las tres:
Recórtala. Un archivo completo trae alfabetos que tu web no va a escribir nunca. Limitado al alfabeto latino, el mismo archivo baja a una fracción.
Carga un solo grosor si solo usas uno. Pedir la negrita cuando no la usas duplica el peso. Y al revés: si pides una negrita que no cargaste, el navegador no falla — engorda los trazos por su cuenta, y una serifa engordada a la fuerza pierde justo lo que la hacía legible.
Que no bloquee. Se le indica al navegador que muestre el texto de inmediato con la letra que tenga a mano y lo cambie cuando la tuya llegue. Nadie se queda mirando una página en blanco esperando una tipografía.
Con eso, el coste es un archivo que se descarga una vez y se queda guardado durante meses.
La comprobación que puedes hacer hoy
No hace falta saber programar y lleva menos de un minuto.
Abre tu web en el navegador del ordenador, haz clic derecho sobre un titular y elige Inspeccionar. En el panel que se abre, busca la pestaña Computed (o «Calculado») y baja del todo: hay una sección llamada Rendered Fonts —«fuentes utilizadas»—. Ahí no pone lo que tu web pidió: pone lo que el navegador pintó de verdad.
Si lo que aparece no es el nombre que esperabas, ya sabes que tu web se ve distinta de como la diseñaron.
Y la comprobación que de verdad cuenta: ábrela en tu teléfono y compárala con la del ordenador, una al lado de la otra. Si los titulares no tienen la misma forma, no es cosa del tamaño de la pantalla.
Lo que esto no significa
No significa que tu web esté rota. Una página con la tipografía del sistema funciona, se lee y posiciona igual: Google no penaliza esto y ningún cliente se va por ello.
Significa otra cosa, más pequeña y más incómoda: que una decisión de diseño por la que alguien pagó —o que alguien tomó con criterio— no está llegando a la mayoría de la gente que abre la página. Y que llevaba tiempo sin llegar, porque este fallo no aparece en ninguna prueba automática ni en ninguna captura de pantalla: en el ordenador donde se revisa, todo se ve exactamente como debía.
Lo encontramos en nuestra propia web. Lo arreglamos el mismo día que lo medimos, y por eso esta página ya carga la letra que dice usar.
Si esto te ha hecho abrir el inspector y lo que salió no era lo que esperabas, en JS Brand Lab construimos y medimos webs con este nivel de detalle.