Academia › Construir › Crear la web
La letra bonita que también tarda en llegar
Sales de esta lección con la lista de tipos de letra de tu web reducida a los justos, y sabiendo cuáles cargar.
Ya sabes cuánto pesa una foto y en qué formato guardarla. Sabes qué vídeo se queda y cuál se convierte en foto. Hay un tercer peso que casi nadie revisa, y es el que menos se nota hasta que ya es tarde: la letra.
La eligió el diseñador porque quedaba elegante. Cuatro grosores distintos: uno fino para los títulos, otro grueso para los botones, y quizá una cursiva reservada para las citas de la web. Esa letra no viene instalada en el móvil de tu clienta. Tiene que descargarla entera antes de poder escribir una sola palabra en la pantalla.
Y hasta que no llega, pasa una de dos cosas. O la pantalla se queda en blanco, sin nada que pintar, o aparece una letra fea de repuesto que salta a la buena en cuanto el archivo termina de bajar. El problema no es tener una tipografía bonita. Es tener demasiadas variantes de ella cargando a la vez, antes de que el cliente vea nada.
Qué es en realidad un tipo de letra para el móvil
Cuando dices "uso la letra Montserrat", tu móvil entiende otra cosa. Entiende un archivo por cada grosor y cada estilo: normal, negrita, fina, cursiva. Si tu web pide los cuatro, el móvil descarga cuatro archivos distintos antes de escribir el primer título, y ninguno le sirve para los otros tres.
Cada archivo pesa entre veinte y cien kilobytes, según cuántos caracteres incluya. No es tanto como una foto sin comprimir. Pero se suma al peso total de la página, y sobre todo se suma al tiempo: el texto no aparece hasta que ese archivo concreto llega. Un móvil con poca cobertura ve la pantalla en blanco más tiempo del que debería, solo por la letra.
El formato en que está guardado ese archivo también cambia el peso, igual que pasaba con las fotos. Un archivo de letra en formato de escritorio, terminado en ttf u otf, puede pesar el doble que el mismo dibujo guardado en formato woff2, pensado para la web. Si tu diseñador te entrega la tipografía en el formato de escritorio, pídele la versión web: la misma letra, la mitad de peso.
En este ejemplo hay cerca de doscientos kilobytes solo en letra. Y en la mayoría de webs, tres de esos cinco archivos se usan en dos frases del pie de página que nadie lee en el móvil: la cursiva de una cita, la fina de un subtítulo decorativo, la negrita de un botón que aparece una sola vez en toda la web.
Cuántos grosores necesitas de verdad
La regla es corta: dos grosores por tipo de letra, tres como mucho. Uno para el texto normal. Otro para lo que quieres que destaque: un título, un precio, un botón. Si de verdad necesitas un tercero, que sea el fino, y resérvalo para un titular grande donde se note.
La cursiva casi nunca hace falta. Si la usas para una frase de un cliente o una cita, prueba a ponerla en redonda y con comillas: se lee igual de bien y te ahorras un archivo entero. Lo mismo con la carta de un restaurante que separa categorías con cuatro estilos distintos de letra: una línea en mayúsculas y el grosor de la negrita bastan para distinguir "Entrantes" de "Postres", sin añadir un quinto archivo.
Y una sola familia de letra basta también. Dos familias distintas, una para los títulos y otra para el texto, son el doble de archivos que descargar por la misma decisión estética que consigues jugando con el grosor de una sola.
- Dos archivos de letra en total
- El título se distingue por ser más grueso, no por ser otra letra
- Todo el texto pertenece a la misma familia, así que combina siempre
- Cuatro archivos como mínimo, dos grosores por familia
- El contraste entre título y texto es más marcado
- Riesgo de que no combinen bien si no las eligió un diseñador
Cual elijo: Elige una familia con dos grosores casi siempre: es la mitad de peso y es difícil que quede mal. Reserva la segunda familia para cuando el negocio necesita distinguirse mucho por estilo, como una marca de moda o un estudio creativo, y aun así con una sola variante de esa segunda letra.
Las letras que no pagas ni esperas: las del sistema
Hay una opción que muchos descartan sin probarla: usar la letra que ya trae el móvil de fábrica. Se llama letra del sistema, y no se descarga nunca porque ya está instalada. En un iPhone es San Francisco. En un Android, Roboto.
El texto aparece en el mismo instante en que carga la página, sin espera ninguna. No es la opción más vistosa, pero es la más rápida posible, y en un negocio donde la clienta entra a mirar un precio o un horario, rápido pesa más que bonito. Tampoco es una letra fea: lleva diez años en todos los iPhone y nadie se ha quejado nunca de ella.
Si tu negocio vive de la primera impresión visual, vale la pena pagar el peso de una letra propia: una marca de ropa, un estudio de fotografía, una joyería. Si vives de que te encuentren y decidan rápido, un taller mecánico, una clínica, un restaurante de barrio, la letra del sistema no te cuesta nada y no le hace esperar nada al cliente.
Con la letra recortada a lo justo, foto, vídeo y tipografía ya están medidos. Falta juntar las tres cosas y ver, cuando la web todavía tarda, qué es lo primero que se recorta.
- Sabes que cada grosor y cada estilo de una letra es un archivo aparte que el móvil descarga antes de mostrar texto
- Has decidido cuántos grosores necesita tu web: dos, como mucho tres, y de una sola familia
- Conoces la letra del sistema, sin descarga ninguna, y cuándo te compensa usarla
- Sabes detectar cuándo una letra se está cargando dos veces sin necesidad
Ponte a prueba
Responde antes de abrir cada una. Si alguna se te resiste, vuelve al apartado que la explica.
1. Tu web usa Montserrat en normal, negrita, fina y cursiva, más una segunda familia solo para los títulos de las secciones, y tarda en abrir con poca cobertura. ¿Qué tocas primero?
La segunda familia y la cursiva. Te quedas con una sola familia y dos grosores: normal para el texto, negrita para los títulos. Ahí recortas la mitad de los archivos de letra sin tocar ni una foto ni un vídeo.
2. Llevas una clínica dental y el diseñador propone una tipografía propia con tres grosores para dar una imagen cuidada. ¿La usas o te quedas con la letra del sistema?
Te quedas con la letra del sistema, o como mucho una familia con dos grosores. Una clínica no vive de la imagen visual, vive de que la paciente entre, vea el horario y pida cita rápido; ahí rápido pesa más que una letra distinguida.
3. Revisas tu web y ves que carga dos archivos con el mismo grosor de la misma letra, uno de tu diseño y otro que trajo el carrusel de fotos de la portada. ¿Qué haces?
Borras la referencia que trajo el carrusel, no la tuya. El texto se ve exactamente igual porque es la misma letra; solo dejas de descargarla dos veces.
solo dejas de descargarla dos veces. Fotos, vídeo y letra ya pesan lo justo por separado. Si tu web aún tarda, toca decidir en qué orden se recorta cuando los tres pesan a la vez.