Las tipografías o fuentes tipográficas son el estilo de las letras que se utilizan para escribir y expresarse mediante textos.
Elegir la tipografía que utilizar en el diseño de la interfaz de un producto o proyecto digital es una decisión bastante importante.
La tipografía en un diseño: Transmite, comunica, identifica.
¿Cómo No elegir una tipografía para una UI?
La selección de una tipografía en el diseño de una interfaz gráfica no debe darse por cosas como: hemos descubierto una nueva tipografía y la queramos usar en la UI que tenemos entre manos, por cambiar para no usar siempre las mismas fuentes o por el hecho de “creo que queda bien”, esto último es muy habitual y aunque puede ser un factor de decisión, siempre debe de haber alguna razón más que justifique ese “queda bien”.
No hay reglas, pero si recomendaciones
El diseño siempre es subjetivo. Si existe una justificación y un contexto que lo acompañe puede ser “correcto”.
Existen reglas sobre el buen uso de las tipografías, y como usarlas para facilitar la lectura. Cómo diseñadores y creadores deberíamos conocerlas, pero ello no quiere decir que no las podamos romper.
A pesar de poder seleccionar y utilizar las reglas tipográficas a nuestro antojo, es cierto que si sigues unas pautas ya establecidas es mucho mas sencillo y fácil que el resultado de tu diseño sea más correcto y óptimo para funcionar en el mundo digital.
Tips para seleccionar tipografía para una UI
Para que aciertes eligiendo una fuente tipográfica adecuada para la interfaz de tu proyecto o producto digital fíjate en los siguientes consejos.
Define un público y una temática
Definir quien va a leer o interactuar con esa interfaz es uno de los puntos más importantes para la selección de tipografía.
Comprender el gusto y la estética de los usuarios o clientes que interactuarán con la web o interfaces de usuario nos permitirá elegir mejor.
Si buscamos transmitir un tono más formal y clásico deberíamos seleccionar un tipografía con serifas, mientras que si pretendemos dotar a la interfaz de una estética más moderna el uso de una fuente sin serifas (Sans-serif o Palo seco) sería más adecuado.
Busca tipografías
Una vez sabes que tono y estética quieres transmitir ha llegado el momento de buscar posibles tipografías.
Aunque se pueden utilizar casi cualquier tipografía con la que contemos (salvo que el diseño o guía de estilo indique una específica) es recomendable utilizar tipografías de calidad y optimizadas para navegadores y dispositivos digitales.
Como consejo, además de la tipografía principal que selecciones, plantea e indica posibles alternativas nativas de los dispositivos donde se verán. Esto es útil por que si no pudiese cargar la tipografía indicada, mostrará la que se encuentre en el sistema y seremos capaces de que el producto final siga unas directrices estéticas acordes y pensadas.
Por ejemplo, si selecciono Proxima Nova, indicaré que en caso de no estar disponible se utilice una Arial, y si no cualquier tipografía Sans-serif.
Selecciona máximo dos tipografías
Empezar con una única fuente permite mantener una interfaz más simple y sencilla. Conforme avance, si es necesario se puede incluir una fuente secundaria con la que potenciar el contraste, la jerarquía y el diseño.
Si bien esto es bastante subjetivo, hay algunas combinaciones que son más disonantes que otras.
No es recomendable utilizar fuentes que sean demasiado similares, ya que esto creará conflictos y disonancias visuales. Si quieres consejos sobre pares de tipografías que funcionan bien, puedes visitar Fontpair y Fontjoy para descubrir y visualizar tipografías afines.
Comprueba el tamaño y define una jerarquía
Verifica y comprueba el tamaño de los caracteres, especialmente como se ven en tamaños pequeños. Piensa en el contexto y en los dispositivos donde se visualizará y leerá esa fuente.
Comprueba también como generarás jerarquía visual con al tipografía, y con los pesos que dispongas. Puedes comprobarlo y crear tu jerarquía tipográfica en esta web.
Prueba temas claros y oscuros
Otro consejo para tu selección es probar la fuente tipográfica tanto en fondos claros como oscuros, para validar si la legibilidad de este tipo de fuente es buena en caso de tener una interfaz con modo oscuro.
Elige tipografías con versión Variable (OpenType)
Para poder llevar a cabo una mejor jerarquía tipográfica es aconsejable escoger una tipografía Opentype o Variable. Estas tipografías permiten disponer de mayor cantidad de pesos tipográficos con los que jugar y construir la UI o el sistema de diseño.
Color y contraste
Aunque lo habitual es utilizar un color negro para los textos, al diseñar una UI debemos pensar en que el tono del bloque de texto armonice con las tonalidades de la interfaz.
Utilizar en el texto un tono oscuro acorde a la paleta de color o un gris intenso (#212121) en vez de un negro (#000000) reducirá el fuerte contraste que puede generar que en bloques de texto grandes los usuarios se cansen de leer.
Para titulares o textos destacados se pueden utilizar otros colores diferentes al texto de lectura, siempre y cuando los colores usados generen un contraste suficiente para no dar problemas de visión. Puedes comprobar el contraste de colores para asegurarte de generar textos accesibles en tu interfaz, Adobe color dispone de esta función.
Donde conseguir fuentes para UI
Hay muchas fundiciones y webs donde comprar y descargar tipografías.
Salvo que las tipografías vengan indicadas en un manual de identidad, o se busque una diferenciación muy llamativa, siempre recomiendo utilizar tipografías de Google Fonts o Adobe Fonts.
Además de que la gran mayoría de opciones que ofrecen son gratuitas, utilizar las fuentes de estos orígenes nos permite saber que son fuentes de calidad y bien creadas para utilizarlas en entornos digitales.
Fuentes y herramientas para seleccionar tipografías
Hay más variedad de orígenes de tipografías pero estas habitualmente son gratuitas y las herramientas las recomiendan y combinan muy bien, permitiendo una selección mucho más fácil y mejor
Google Fonts
Adobe Fonts
Atipo foundry
Archetype
Fontjoy
Conclusión
Prueba, observa y pregunta. La mejor manera de averiguar y conseguir la tipografía adecuada para una interfaz de usuario es probar y plantear diferentes posibilidades.
Una vez hayas decidido que tipografía es la más adecuada, pruébala en tu web o producto y empieza a utilizarla y analizar como funciona. Con el tiempo una manera de verificar si la elección fue acertada es preguntar a los usuarios y personas que utilizan la UI acerca de la legibilidad, los tamaños y si ven cosas extrañas en la interfaz.
Óscar López Poveda
Diseñador UX/UI y de producto digital.
Soy Óscar López y vivo diseñando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el diseño y siempre estoy abierto a apuntarme a un «bombardeo» de poryectos y descubrir personas que les apasione el mundo digital.
