11 recursos de tipografía para diseñadores UI

Los recursos de tipografía para diseñadores UI los usamos muy a menudo. La tipografía es ese elemento imposible de evitar en casi cualquier interfaz. Siempre está presente, siempre ahí.

Tan presente que muchas veces dejamos de verla. Escaneamos la página, saltamos bloques de texto, no siempre leemos de verdad. Y aun así, sigue siendo diseño. Y uno con muchísimo peso, incluso poder.

Influye directamente en la experiencia de usuario. Transmite energía, marca el ambiente, introduce pausas. En la tipografía, en gran parte, se construye la jerarquía de la interfaz. Y, por supuesto, también es clave en los elementos de call to action.

Este artículo es un recopilatorio, igual que el anterior donde hablaba de dónde aprender UX online.

Después de unos años guardando recursos, he decidido reunir aquí herramientas útiles (y gratuitas) para trabajar con tipografía. Comparto lo más valioso de mis guardados.

Recursos de tipografía prácticos y librerías

Google Fonts

recursos tipografía para diseñadores UIEs obvio, pero merece estar. Es muy fácil de usar, un gigante de typefaces. Muchas interfaces actuales se construyen sobre estas fuentes (incluyendo esta web), y bien usadas funcionan perfectamente.

 

Fontshare – Font Pairing

Elegir una buena tipografía es una cosa. Combinar dos bien, otra distinta. Es uno de los recursos de tipografía para diseñadores UI más útiles a la hora de emparejar fuentes. Esta sección de Fontshare está centrada justo en eso, propuestas de combinaciones ya pensadas. No solo qué fuentes usar, sino cómo conviven entre ellas. Útil cuando necesitas avanzar sin quedarte bloqueado.

Fonts Ninja – Chrome extention

Extensión de navegador que identifica al instante cualquier tipografía que veas en una web. Pasa el cursor y te da nombre, tamaño, espaciado y de dónde conseguirla. Una de esas herramientas que parece pequeña hasta que la tienes instalada.

Best Free Fonts

recursos tipografía para diseñadores UIUn repositorio bastante amplio de tipografías gratuitas. Aquí no todo es oro, pero precisamente por eso es interesante. Hay variedad, estilos distintos, y a veces aparecen fuentes menos mainstream que pueden encajar bien en proyectos con más personalidad.

Symbl.cc

Una de esas herramientas que no parecen importantes hasta que la necesitas. Es una biblioteca enorme de símbolos y caracteres Unicode. Muy útil cuando trabajas microcopy o necesitas pequeños acentos visuales sin recurrir a iconografía externa.

Herramientas para jerarquía y escala tipográfica

Type Scale

Una herramienta muy simple pero muy potente para definir jerarquías tipográficas. Permite generar escalas de tamaños basadas en proporciones, lo que ayuda a que los textos respiren mejor y tengan coherencia visual. Especialmente útil cuando no quieres decidir tamaños a ojo.

Modular Scale

Otro clásico para trabajar proporciones tipográficas. Quizá menos visual, pero muy preciso. Si te interesa entender bien la lógica detrás de las escalas, este recurso tiene mucho valor.

Inspiración y cultura tipográfica

Fonts In Use

Probablemente uno de los recursos más interesantes de esta lista. No es solo un catálogo de tipografías, es una colección de ejemplos reales. Branding, editoriales, interfaces… ver cómo se usan las fuentes en contexto cambia bastante la forma de elegir.

Typewolf

Un sitio creado por Jeremiah Shoaf, diseñador con 20 años de experiencia, que ayuda a elegir tipografías mostrando ejemplos reales de cómo se usan en webs. La diferencia con Fonts In Use es el enfoque: Typewolf analiza el por qué funciona cada decisión tipográfica, no solo la muestra. Tiene mucho criterio detrás.

Future Fonts

Un marketplace de tipografías en progreso. Los diseñadores publican sus fuentes mientras las desarrollan, a un precio menor, y quien compra recibe todas las actualizaciones sin coste adicional. El resultado es un catálogo de tipografías experimentales y de autor que no encontrarás en ningún otro sitio. Si te interesa salir del circuito habitual, aquí hay mucho que explorar.

Another Graphic

Más cercano a una revista que a una herramienta. Mezcla diseño, tipografía y cultura visual. No es un recurso práctico en el sentido clásico, pero sí uno que alimenta criterio y sensibilidad.

Postdata

Seguramente vosotros también tenéis vuestra propia lista de recursos. Cualquier aportación será más que bienvenida para hacer este recopilatorio aún más completo.