Fontalog: buscar tipografías por sus características

Elegir una tipografía para una web suele empezar con una intención: queremos que la marca se perciba sólida, cercana, técnica, elegante o contemporánea.

El problema aparece al intentar traducir esa intención a un buscador de fuentes. «Elegante» no es una categoría tipográfica. «Con personalidad, pero fácil de leer» tampoco. Así que terminamos entrando en Google Fonts, marcando serif o sans serif y recorriendo páginas de resultados que se parecen demasiado entre sí.

O, todavía peor, elegimos una tipografía que ya conocemos porque no sabemos cómo buscar otra.

Fontalog plantea una forma distinta de explorar. En lugar de obligarnos a empezar por una categoría, permite buscar tipografías por cuatro características visibles: peso, proporción, contraste y altura de x.

En este artículo, vamos a ver por qué clasificar las tipografías siempre ha sido bastante más complicado de lo que parece, cómo funciona Fontalog y de qué manera puede ayudarnos a elegir fuentes para una web con criterios más precisos.

Clasificar tipografías nunca consistió en decir «serif o sans serif»

Las clasificaciones tipográficas son útiles. Nos dan vocabulario para reconocer parecidos, explicar decisiones y movernos entre miles de fuentes. El problema llega cuando confundimos ese vocabulario con un sistema exacto y universal… porque no lo es.

Una de las primeras clasificaciones modernas fue la de Francis Thibaudeau, publicada en 1921. Su propuesta se fijaba sobre todo en la forma de los remates y dividía las tipografías latinas en cuatro grandes familias: elzevirianas, didonas, egipcias y antiguas. Era un sistema fácil de entender, pero pronto se quedó pequeño. Las fuentes que no encajaban terminaban agrupadas como script o fantasía, dos cajones bastante amplios para todo lo que se salía de la norma.

En 1954, Maximilien Vox desarrolló una clasificación más detallada. Mezcló rasgos formales con historia de la tipografía y creó las categorías humanas, garaldas, reales, didonas, mecanas, lineales, incisas, escriptas y manuales. La Association Typographique Internationale (ATypI) adoptó el sistema en 1962 y completó la clasificación añadiendo dos categorías más (góticas y no latinas), llegando a las 11 categorías de Vox-ATypI.

El sistema ayudó a ordenar el panorama, pero también heredó varios problemas. Una categoría podía describir a la vez una época, una forma de construir las letras y una apariencia. Además, estaba pensada principalmente para tipografías latinas y para un mundo en el que las fuentes contemporáneas, híbridas y variables todavía no existían.

Por eso encontramos tantos nombres para formas parecidas: una tipografía puede aparecer descrita como lineal, grotesca, neogrotesca o sans serif según el sistema, el país, la fundición o el catálogo que consultemos. Y una fuente actual puede tener estructura humanista, proporciones geométricas y algún detalle grotesco al mismo tiempo.

En 2021, la propia ATypI retiró su respaldo oficial a la clasificación Vox-ATypI. Entre otras razones, reconocía la necesidad de trabajar con sistemas capaces de representar la diversidad de escrituras y de tipografías que existen hoy.

Esto no convierte las clasificaciones tradicionales en inútiles. Conocer qué es una didona o de dónde viene una humanista ayuda a entender el carácter de una fuente y las asociaciones culturales que arrastra. Pero esas etiquetas no siempre son el mejor punto de partida para encontrar la tipografía que necesitamos.

Fontalog cambia las categorías por características que se pueden ver

Fontalog es una herramienta de FontBase que, en el momento de escribir este artículo, reúne más de 3,5 millones de fuentes. No es una biblioteca desde la que descargar tipografías. Es un buscador: sirve para localizar familias, conocer sus datos y descubrir otras con una apariencia próxima.

Podemos buscar por nombre, estilo o fundición, pero su parte más interesante son cuatro controles con valores entre 0 y 1:

• Peso: desde trazos muy finos hasta letras muy gruesas.
• Proporción: desde caracteres muy condensados hasta otros muy anchos o expandidos.
• Contraste: desde letras casi monolineales, cuyos trazos mantienen un grosor parecido, hasta fuentes con una diferencia muy marcada entre trazos gruesos y finos.
• Altura de x: indica cuánto ocupan las minúsculas, sin contar ascendentes y descendentes, en relación con las mayúsculas.

La diferencia parece pequeña, pero cambia la manera de buscar. Ya no necesitamos saber a qué familia histórica pertenece lo que tenemos en la cabeza. Podemos describir cómo queremos que sea.

Qué significan esos cuatro rasgos cuando diseñamos una web

Los controles no son simples datos técnicos. Cada uno tiene consecuencias visibles en la interfaz.

El peso influye en la jerarquía y en el tono

Una fuente ligera puede transmitir delicadeza, pero pierde presencia en tamaños pequeños y sobre fondos con poco contraste. Una tipografía más gruesa soporta mejor titulares breves, cifras o llamadas a la acción, aunque puede resultar pesada si la usamos en párrafos largos.

Buscar por peso resulta especialmente útil cuando queremos una tipografía que ya tenga una voz determinada en su estilo regular, antes de empezar a compensarla con negritas.

La proporción decide cuánto texto cabe

Las fuentes condensadas permiten construir titulares contundentes sin que ocupen cuatro líneas y pueden funcionar bien en categorías, cifras o cartelería. Las fuentes más anchas necesitan espacio y suelen producir un ritmo más pausado.

En una web, este rasgo afecta directamente a la navegación, a las tarjetas, a los botones y a la forma en que cambian los titulares entre escritorio y móvil.

El contraste aporta carácter, pero también exige cuidado

Las fuentes con poco contraste suelen resistir bien en tamaños pequeños y en interfaces. Las de contraste alto recuerdan a tipografías editoriales como Didot o Bodoni: pueden aportar sofisticación y una personalidad muy marcada en titulares grandes.

En cuerpos pequeños, esos trazos finos pueden perderse. También pueden sufrir en pantallas de baja calidad, sobre una fotografía o cuando el color del texto no contrasta lo suficiente con el fondo.

La altura de la x cambia el tamaño que percibimos

Dos fuentes configuradas a 1rem no tienen por qué parecer igual de grandes. Cuando la altura de x es alta, las minúsculas ocupan más espacio y el texto suele percibirse más grande. Eso puede mejorar la legibilidad en textos pequeños, etiquetas y campos de formulario.

También cambia el número de caracteres que caben en una línea y el espacio que necesita el texto para respirar. Elegir una fuente con una altura de la x alta no nos libra de ajustar el tamaño, el interlineado y la longitud de línea, pero nos da un punto de partida más apropiado para interfaces densas.

Ejemplo 1: encontrar una tipografía para el texto de una web

Imagina que estamos diseñando la web de una asesoría. Necesitamos una tipografía sobria y cercana, capaz de funcionar en párrafos, formularios, tablas y pantallas pequeñas.

Podríamos empezar con estos criterios:

• peso medio, evitando extremos demasiado finos o gruesos;
• proporción intermedia, para mantener una lectura natural;
• contraste bajo o moderado, de modo que los trazos pequeños conserven claridad;
• altura de la x media-alta, para una buena legibilidad.

Fontalog nos permite combinar esos cuatro rangos y reducir millones de fuentes a un conjunto con una estructura visual razonable para ese uso. Después empieza la selección de verdad: probar párrafos completos, cifras, tildes, signos, botones y campos de formulario.

El buscador no puede decirnos si una fuente es legible en nuestro proyecto. Sí puede evitar que dediquemos una tarde a revisar fuentes que, por su propia construcción, difícilmente van a funcionar como texto de interfaz.

Ejemplo 2: buscar un titular que ocupe menos líneas en móvil

Supongamos que el manual de marca utiliza titulares muy grandes y contundentes. En escritorio funcionan bien, pero en móvil una frase de seis palabras ocupa cinco líneas y empuja el contenido importante fuera de la primera pantalla.

Reducir muchísimo el tamaño resolvería el espacio, aunque también destruiría la jerarquía. Otra opción es buscar una fuente con:

• una proporción más condensada;
• peso medio-alto;
• contraste bajo, para mantener solidez;
• una altura de la x que no haga las minúsculas demasiado pequeñas.

La búsqueda ya no sería «quiero una tipografía industrial». Sería «quiero letras relativamente estrechas, con peso y con poco contraste». Esa descripción es mucho más concreta y nos permite comparar resultados que pueden proceder de categorías distintas, pero resuelven el mismo problema de composición.

Por supuesto, una tipografía condensada tampoco puede ser la excusa para meter textos interminables dentro de un botón o de un menú. La herramienta ayuda a encontrar una forma adecuada; el trabajo de priorizar el contenido sigue siendo nuestro.

Ejemplo 3: partir de una fuente de referencia sin copiarla

A veces el cliente trae una referencia muy clara: nos propone usar la tipografía de otra marca o ya utiliza una fuente en sus presentaciones, pero no tiene licencia web, o no incluye suficientes pesos.

Si conocemos el nombre de la fuente, podemos buscarla en Fontalog y consultar otras tipografías con medidas similares. El resultado no tiene por qué ser una copia. Nos da un vecindario formal desde el que explorar alternativas que comparten peso, anchura, contraste y altura de la x.

Si solo tenemos una captura, primero necesitaremos identificar una posible fuente con una herramienta específica. Fontalog no reconoce tipografías a partir de imágenes. Una vez tengamos un nombre aproximado, podemos usarlo como punto de partida y alejarnos de la referencia de forma consciente.

Este flujo también es útil cuando una marca quiere dejar de usar una fuente tan reconocible como Montserrat, Poppins o Playfair Display, pero teme perder el tono que ya ha construido. En lugar de pedir «una fuente parecida», podemos detectar qué rasgos queremos conservar y cuáles conviene cambiar.

Ejemplo 4: construir una pareja tipográfica

Combinar tipografías no consiste únicamente en emparejar una serif con una sans serif. Dos fuentes de categorías diferentes pueden parecerse tanto en ritmo y proporciones que apenas creen jerarquía. Y dos fuentes de la misma categoría pueden contrastar de una forma muy expresiva.

Imagina que ya tenemos una sans serif de poco contraste y altura de x elevada para el cuerpo. Para los titulares podríamos buscar una fuente que mantenga una proporción parecida (así el sistema conserva cierta coherencia) y aumentar el contraste óptico. También podríamos mantener el contraste y cambiar mucho el peso o la anchura.

Fontalog permite decidir dónde queremos continuidad y dónde diferencia. Es una manera bastante más precisa de combinar fuentes.

Después hay que probarlas juntas con contenido real. Una pareja tipográfica no se decide mirando dos palabras enormes, sino comprobando titulares largos, entradillas, párrafos, enlaces, cifras y jerarquías completas.

Ejemplo 5: traducir adjetivos de marca a decisiones observables

Los briefings están llenos de palabras como «premium», «amable», «innovadora» o «artesanal». El problema es que cada persona imagina algo distinto cuando las oye.

Fontalog puede servir como herramienta de conversación con el cliente. En vez de discutir sobre adjetivos, podemos preparar varias direcciones:

• una propuesta de alto contraste, peso ligero y proporciones amplias;
• otra de poco contraste, mayor peso y construcción compacta;
• una tercera con altura de la x alta y proporciones abiertas.

Al verlas aplicadas al mismo contenido, resulta más fácil explicar qué hace que una opción parezca delicada, rotunda, editorial o funcional. El cliente deja de escoger entre nombres de fuentes y empieza a decidir sobre rasgos que realmente puede percibir.

Lo que Fontalog no puede decidir por nosotros

Una base de datos de características ópticas es un magnífico instrumento de exploración, pero no es un recomendador completo para tipografía web.

Antes de elegir una fuente para WordPress, todavía tenemos que comprobar:

• que su licencia permita utilizarla en la web y en el número de dominios necesario;
• que incluya los caracteres del idioma: eñes, tildes, signos de apertura y cualquier otro alfabeto que necesite el proyecto;
• que tenga los pesos, cursivas y estilos que requiere el sistema de diseño;
• que disponga de archivos adecuados, preferiblemente WOFF2, y que su peso no penalice la carga;
• que las cifras y los caracteres parecidos se distingan bien;
• que funcione con tamaños reales, en móvil y en las condiciones de contraste del diseño;
• que la fuente siga siendo usable cuando el usuario amplía el texto o cuando una traducción ocupa más espacio.

Una manera más útil de buscar tipografías

Las clasificaciones tipográficas intentaron resolver el problema que había: poner orden para que pudiéramos estudiar, nombrar y encontrar fuentes. Siguen siendo valiosas para comprender su historia y aprender a ver diferencias. Pero un sistema creado para describir genealogías no siempre sirve para responder a una necesidad concreta de diseño web.

Fontalog resulta interesante porque nos permite buscar a partir de la forma de las letras: cuánto pesan las letras, cuánto espacio ocupan, cuánto varían sus trazos y qué presencia tienen las minúsculas.

Eso nos ayuda a pasar de «quiero una tipografía moderna» a una petición que se puede observar, comparar y probar.

La elección final seguirá necesitando nuestro criterio de diseño. Tendremos que valorar la marca, el contenido, la legibilidad, la licencia y el rendimiento. Pero al menos ya no estaremos probando suerte buscando entre millones de tipografías «modernas».

Te lo ha contado

Ana Cirujano

Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.

Quién soy Cómo te puedo ayudar