Tipografía para web: por qué una fuente de impresión no siempre funciona en nuestro navegador.

Empecemos por el principio: tipografía para imprimir y para la web

Para nuestros programas de diseño impresos, usamos:

TrueType y OpenType: estos formatos contienen los contornos de las letras descritos matemáticamente, junto con sus medidas y espacios. Esa información permite reproducir la misma letra en distintos tamaños y resoluciones:

• En pantalla, el sistema transforma los contornos en píxeles.
• Para imprimir, el sistema procesa esos contornos a la resolución del equipo de salida.

Por eso, una misma fuente moderna puede servir tanto para pantalla como para impresión.

Pero la pantalla no es internet. Para internet, habitualmente nuestro navegador usa:

WOFF2: Web Open Font Format 2 o «Formato abierto de fuentes para la web, versión 2». Es un formato que comprime los datos de una fuente para que pese menos y se descargue más rápido. El dispositivo los interpreta y convierte las letras en píxeles. Ese proceso se llama rasterización.

Por esta razón, tener la fuente instalada en nuestra computadora no hace que esté disponible en los dispositivos de los visitantes. Pero aquí no termina la historia.

El archivo de diseño y la página web trabajan de forma distinta

En Illustrator, CorelDRAW o InDesign, el programa muestra el texto con las fuentes disponibles en tu computadora. Al preparar una pieza final para impresión, puedes entregar un PDF con las fuentes incrustadas o convertir el texto en contornos, según lo que requiera la imprenta. Así, la apariencia de esa pieza queda definida en el archivo que se va a imprimir.

Una página web, en cambio, no llega al visitante como una hoja, un flyer o un brochure terminado. El navegador recibe el texto y las instrucciones de diseño, y debe mostrarlo en el dispositivo de cada persona. La fuente instalada en tu computadora no viaja automáticamente con la página. Si el navegador no dispone de ella y el sitio no le proporciona un archivo de fuente, utilizará otra.

Imagina que haces un encabezado en tu computadora y eliges una letra por la forma de su «a» y su «g». Tú ves exactamente lo que diseñaste. Ahora ponte en el lugar de alguien que abre la página desde su teléfono: ese teléfono no tiene por qué tener instalada la misma fuente. El encabezado podría verse con otra letra, ocupar más espacio y cambiar los saltos de línea.

¿Qué necesita una fuente para funcionar en la web?

Para que el navegador muestre una tipografía concreta, el sitio debe indicarle de dónde obtenerla. Normalmente se hace mediante estilos CSS que enlazan un archivo de fuente preparado para su distribución en la web; WOFF2 es uno de los formatos habituales para ello. También se indica una fuente de respaldo para el caso en que la principal no cargue.

Ahí está la diferencia técnica principal: un archivo de fuente que funciona en tu programa de diseño no queda incorporado a una web por escribir su nombre en el diseño. El navegador necesita poder acceder al archivo adecuado y cargarlo. Además, cada variante que utilices —por ejemplo, regular o negrita— debe estar disponible para ese uso.

Esto no quiere decir que exista una barrera absoluta entre «fuentes para imprimir» y «fuentes para web». Una misma familia tipográfica puede tener archivos y usos para ambos medios. Pero al pasar del diseño impreso al digital hay que resolver cómo se entregará la fuente al navegador del usuario. Tenerla instalada para diseñar no resuelve esta parte.

Tipografía para web: buscar una equivalencia con criterio

En muchos proyectos, la solución más práctica es buscar una fuente disponible para web que conserve la intención del diseño original. Yo suelo explorar Google Fonts. Eso fue lo que hice cuando surgió la petición del cliente: él pedía usar Avant Garde y encontramos en Poppins una alternativa apropiada para aquel sitio.

Pero elegir una equivalencia no significa quedarse con la primera letra que se parece. Hay que observar qué hacía atractiva a la fuente inicial: ¿su geometría?, ¿sus proporciones?, ¿la amplitud de sus caracteres?, ¿su presencia en los titulares? Después hay que probar a la candidata en el contenido real: títulos, párrafos, botones y menús.

Una fuente puede recordar mucho a otra cuando escribimos una sola palabra en grande y comportarse de manera muy distinta en una página completa. Por eso también reviso cómo se leen los textos en un teléfono, una tableta y una pantalla de escritorio. La pregunta útil no es solo «¿se parece?», sino «¿funciona para las personas que van a leerla?».

¿Y si el diseño también se usará en una app?

En una aplicación ocurre algo parecido: mostrar una fuente en una maqueta no garantiza que aparezca en el producto terminado. El equipo que desarrolla la app debe tener acceso a los archivos necesarios e integrarlos de acuerdo con la plataforma utilizada. Luego hay que comprobar su lectura en las pantallas y tamaños donde aparecerá.

Piensa, por ejemplo, en el nombre de una sección que cabe sin problema en tu diseño, pero se corta dentro de un botón en un teléfono pequeño. A veces la mejor decisión es ajustar tamaños y espacios; otras veces, escoger una fuente con proporciones más adecuadas. La tipografía participa en la experiencia de uso, no solo en la apariencia de la maqueta.

OK, Carlos, pero el cliente insiste: ¿qué hacemos?

Sí, eso puede pasar. Usualmente existen equivalentes visuales en los formatos ya descritos con anterioridad; por ejemplo: para Helvetica se puede usar Roboto, para Futura una opción es Jost, y podemos seguir con una lista larguísima. Si la equivalencia es la correcta, en mi experiencia el cliente la acepta.

Pero también es cierto que muchas fuentes TrueType y OpenType pueden tener versiones WOFF2, y aquí te respondo directamente desde mi experiencia como diseñador web especializado en WordPress.

Algunas fuentes requieren una licencia de pago para su uso web; otras tienen licencias gratuitas. Alojar la fuente en tu servidor puede implicar hacer modificaciones en el CSS del tema y, según el tema o constructor que uses, existe la posibilidad de necesitar un tema hijo.

Esto no te garantiza que aparezca en todos los dispositivos. Al modificar los CSS y si realizas un tema hijo, yo recomendaría estar atento a las actualizaciones, por la aparición de posibles errores.

También pueden aparecer incompatibilidades con plugins instalados y lo que los clientes no soportan: que la página cargue más lento, lo cual es una posibilidad.

Todo esto dependerá de que el sitio web tenga la optimización correcta. Además, esto representa más trabajo para el diseñador y un costo que el cliente tiene que pagar.

Muchas veces me piden sitios minimalistas, pero el concepto de «menos es más» también se aplica al backend.

Diseñar para la web también es saber traducir una idea

Cuando un cliente o un diseñador propone una letra específica, vale la pena escuchar qué le gusta de ella antes de buscar alternativas, porque la tipografía es un elemento de lo que se quiere transmitir como parte de un todo. Así podemos conservar la intención visual aunque cambie la fuente. Fue lo que ocurrió recientemente, y es una situación que puede repetirse con muchas otras familias tipográficas.

La próxima vez que una letra se vea perfecta en tu programa de diseño, hazte una pregunta sencilla: ¿cómo llegará esa letra a la pantalla de otra persona? Pensar en eso desde el comienzo ayuda a tomar mejores decisiones y a explicar con claridad por qué, a veces, la mejor solución es encontrar una equivalencia.

¿Te has encontrado con este problema al llevar un diseño a una web o una app? Cuéntame tu experiencia o deja tus preguntas en los comentarios. También puedes sugerirme otros temas de diseño que te gustaría que tratara. Si deseas conocer más sobre mis servicios y productos, visita carlosapitz.com y linkteam305.com.