BookinglyTech News
Software

Qué tipografías usan los SaaS en el navegador y cómo no fallar al elegir

El factor decisivo no es el tamaño grande, sino la altura de la x, el tracking y la legibilidad en modo oscuro a 16 píxeles.

2 min de lecturaDev.to0 vistas

La mayoría de los logotipos de SaaS fracasan porque se diseñan a 80 píxeles en Figma y se despliegan a 13. El problema no es el logotipo en sí, sino la fuente elegida. En el día a día, el nombre de una aplicación vive en la pestaña del navegador, en la barra lateral o junto al favicon, nunca en un cartel publicitario. Alexcommitter, desarrollador de LogoRay, ha analizado miles de casos y descubre que el error más habitual ocurre al no validar la tipografía en el tamaño real de uso.

Tres métricas, no opinión

Un specimen de fuente no sirve para evaluar su comportamiento en una interfaz de producto. Lo que importa son tres propiedades técnicas. La primera es la altura de la x. Una minúscula más alta conserva la forma de las letras cuando el renderizado baja a 16 píxeles. Las tipografías deisplay de baja altura se ven elegantes en grande pero se convierten en un borrón indistinguible en la pestaña del navegador.

La segunda es el comportamiento del tracking. Muchas fuentes que parecen nítidas a gran escala cierran el espaciado al reducirse, soldando las letras justo donde los usuarios las ven con más frecuencia. La tercera es el renderizado en modo oscuro. Los trazos finos que parecen refinados sobre blanco desaparecen sobre fondos casi negros o generan un halo de bloom. Las fuentes robustas y de peso uniforme con huecos internos abiertos superan estas tres pruebas.

La lista corta y la licencia

El resultado es una lista reducida. Para el logotipo, se recomiendan grotescas o geométricas sin serifas. Space Grotesk, Sora, Schibsted Grotesk, Hanken Grotesk, Outfit, Familjen Grotesk y Gabarito cumplen los requisitos. La elección final depende de si el producto debe proyectar ingeniería, calma o cercanía, pero todas comparten las características técnicas anteriores. Para el cuerpo de texto de la interfaz, la recomendación es Inter. Un cuerpo neutral permite que la tipografía del logotipo tenga personalidad sin que la interfaz se sienta saturada.

Hay que evitar las fuentes de tendencia, las estéticas de ciencia ficción y los pesos ultrafinos. Estas opciones envejecen rápido o fallan en dispositivos móviles. La prueba definitiva dura dos minutos: escribir el nombre a 16 y 20 píxeles, sobre fondo blanco y negro, y verificar que los huecos se mantienen abiertos, el espaciado no se cierra y los trazos no pierden contraste.

Sobre el uso comercial, todas las fuentes mencionadas se distribuyen bajo licencias abiertas, habitualmente la SIL Open Font License, que permite su uso en logotipos comerciales. Esta es una ventaja operativa significativa frente a tipografías de pago que requieren gestión de licencias por sede o usuario. Verificar el archivo de licencia en la página de Google Fonts es un paso necesario antes de integrar la fuente en el repositorio del proyecto.