Una de las primeras cuestiones que surgen al empezar a diseñar un proyecto desde 0 qué y cómo elegir la tipografía y las fuentes que mejor se ajusten al proyecto.
Si trabajamos con una marca desarrollada es posible que este problema ya lo tengamos resuelto, pero si la marca no está bien definida, seguro que vamos a vernos en la tesitura de tener que elegir un estilo u otro.
Para ayudarte en esa elección he desarrollado esta guía sobre cómo elegir tipografías y fuentes en diseño UI aunque también sirve para cualquier otro tipo de diseño que implique texto.
Tabla de contenidos
Estos son los efectos que vamos a ver en esta entrada:
Antes de entrar en materia pongamos un poco de contexto viendo qué diferencia hay entre tipografía y fuente.
¿Qué diferencia hay entre tipografía y fuente?
En español tenemos un problema de traducción que nos dificulta entender la diferencia entre tipografía y fuente ya que “tipografía” vale tanto como traducción de “typography” como de “typeface”. Por ello debemos la mejor explicación que encuentro es diferenciando estos conceptos de esta manera.
- Tipografía como typeface: es el conjunto de características de diseño que confieren un estilo distintivo a una determinada colección de letras, números y símbolos. Por ejemplo Arial, Helvetica o Inter. Aunque normalmente se le llama tipografía, sería conveniente llamarlo familia tipográfica.
- Tipografía como typography: es la técnica de organizar textos para hacerlos legibles, atractivos y funcionales. Incluye la elección de fuentes, tamaños, interlineado, espaciado, alineación, etc. Es un concepto más amplio y abarca todo lo relacionado con el diseño del texto.
- Fuente: en la actualidad es el archivo digital con su conjunto de estilos que usa un ordenador o dispositivo para escribir. En términos tradicionales, una fuente era el conjunto de letras físicas usadas en una imprenta.
En resumen, la fuente es la materialización (o digitalización) de la tipografía entendida como typeface pero la tipografía como typography es el uso y cambios en la fuente.
Cómo elegir una tipografía en diseño UI
Ahora que comprendemos la diferencia entre tipografía, familia tipográfica y fuente, estamos casi listos para empezar a montar la tipografía. Sin embargo, antes que nada, debemos saber qué y cómo queremos comunicar para elegir la mejor tipografía posible. Para ello seguiremos estos criterios.
Requisitos
Un apartado importante es pensar en qué requisitos o restricciones va a tener el proyecto para asegurarnos que la tipografía incluye los caracteres necesarios.
No es lo mismo si el proyecto va a ser solo en inglés que si además va a ser en español o va a tener idiomas con otras grafías como por ejemplo el chino. Lo mismo sucede con los símbolos de divisa. Si te interesa esta temática, mira esta entrada sobre internacionalización del software.
Respecto a los requerimientos también debemos tener en cuenta factores como las llamadas funcionalidades y características (font functionalities y design features). Las funcionalidades son los aspectos visuales que permite la fuente como los diferentes pesos o la cursiva y las características el tipo de contenido como por por ejemplo el permitir mayúsculas y minúsculas o incluir números.
Legibilidad
Para valorar la legibilidad tienes que medio prever el tamaño al que va a mostrarse el texto, así como la cantidad que va a tener. No es lo mismo un texto a 62px que 16px ni de 1 línea que de 5 líneas.
Por esta razón, si el texto no va a tener un tamaño grande (display) se desaconseja plenamente utilizar tipografías que tengan un estilo complejo y que pueda confundir a los lectores, dificultando así la lectura.
De igual forma, si el texto va a tener múltiples líneas y párrafos, necesitamos que la tipografía tenga un buen espaciado entre caracteres y, sobre todo, entre líneas. De hecho, para párrafos largos se suele aconsejar tipografías con serifa, aunque yo creo que con la calidad de las pantallas actuales esto ya da completamente igual. La prueba de lo que digo es que tanto Google como Apple tienen tipografías con serifa incluso en su documentación legal.
Clasificación o estilo de fuente
Las tipografías pueden clasificarse por familias y por los llamados estilos de fuente como vemos en webs como Google Fonts.
En términos generales hay 3 grandes estilos:
- Con serifa (serif)
- Sin serifa (sans-serif)
- Manuscrita (script / handwritten)
Si quieres profundizar y descubrir subtipos puedes hacerlo en esta entrada de Google Fonts.
Tipografías con serifa
Son aquellas que tienen las llamadas serifas, terminaciones o remates que suelen añadirse al final de los trazos de las letras. Por ello estas tipografías comunican seriedad, tradicionalidad y elegancia.
Algunos ejemplos de este estilo son las tipografías Times New Roman, Garamond o Bodoni, una de mis preferidas.
Tipografías sin serifa
Son aquellas que no tienen esos remates o terminaciones añadidas a cada letra. Por lo que son visualmente más limpias y ligeras. Por ello este estilo comunica modernidad, limpieza y neutralidad.
Algunos ejemplos son las populares Helvetica, Arial o la de este blog, Montserrat.
Tipografías manuscritas
Son aquellas que imitan la escritura a mano, como si estuvieran hechas con bolígrafo, pincel o pluma. Se caracterizan por tener trazos fluidos, cursivos o caligráficos, y suelen transmitir una sensación más personal, informal, artística o artesana.
Algunos ejemplos de esta tipografía son la Playwrite, Milkshake o la famosa Rage Italic que utiliza el nombre del juego Vice City
Complejidad
Las tipografías pueden catalogarse en un rango entre simples o complejas en función de factores como son la cantidad de detalles que tienen o la complejidad de puntos que tiene el trazo o perímetro. Por ejemplo, las tipografías con efecto borrado son muy complejas y las tipografías sans-serif son las más simples que hay.
Como hemos venido leyendo, las fuentes tipográficas simples son fáciles de leer y por eso dan mayor sensación de ligereza.
Por su parte, las fuentes tipográficas complejas son difíciles de leer, lo que también hace que les hagamos más caso y, por tanto, potencia su capacidad de distinción y personalidad, lo cual también se traduce en que su producto se sienta más especial.
Ancho de fuente y espaciado
Otra propiedad más a tener en cuenta es el ancho de la fuente. Algunas fuentes solo tienen un ancho de fuente determinado pero muchas otras incluyen opciones condensed o extended (a veces llamado expanded).
Como bien sabes, el ancho de fuente afecta a la capacidad de texto que cabe en una sola línea, lo cual ya puede ser un motivo en sí mismo para elegir un ancho u otro. Eso sí, no abandones nunca el criterio de legibilidad.
Por otra parte, el ancho de fuente también comunica en sí mismo. Como Recoge Nick Colenda en su guía, un ancho de fuente superior ayuda a transmitir durabilidad y estabilidad y un ancho de fuente más estrecho ayuda a transmitir precisión y ligereza.
Espaciado
Dentro del ancho de fuente hay un factor secundario que también incide en la percepción de los mensajes. Éste es el espaciado entre letras.
Un espaciado grande equivale a más separación entre letras, lo que implica menos estrés, más relajación y más pausa. Lo que nos transmite este estilo se asemeja mucho a lo que hace un museo, donde las diferentes piezas tienen bastante separación entre ellas. Así pues, un espaciado grande nos transmite tranquilidad, exclusividad y valor.
Un espaciado pequeño equivale a que las letras estén más juntas, lo que genera cierto nivel de estrés y energía. Este estilo nos transmite algo parecido a un sitio masificado. Dinamismo, actitud, humildad, accesibilidad y poco valor.
Eso sí, hay que tener cuidad con el concepto de accesibilidad y la falta de espaciado porque a menor separación de letra, mayor dificultad de lectura y menor accesibilidad real.
Peso
El peso de la propia fuente o de la letra también es otro factor que impacta en la percepción. Como sabes, hay un gran rango de pesos. Desde thin hasta black, estos se suelen representar en unidades de 100. Así pues:
- Thin = 100
- Light = 300
- Regular = 400
- Medium = 500
- Bold = 700
- Black = 900
Los pesos ligeros se utilizan para estilizar y se vinculan con el lujo, la sofisticación y la feminidad como sabes por los logos de las marcas de cosmética y lujo. Estos pesos ligeros transmiten delicadez y gentileza además de livianez y precisión tal y como veíamos con el estilo condensed.
Los pesos medianos, son los que mejor legibilidad tienen. Así pues son los más recomendados para lecturas largas. En términos semióticos, aportan cercanía y naturalidad aunque también algo de seriedad. Por otra parte, también aportan modernidad.
Los pesos pesados se suelen utilizar para masculinizar, sobre todo unido al uso de las mayúsculas. Otros atributos que aporta este peso son la seguridad, la solidez, la fuerza o la dominancia. Por esta razón, pueden llevar a sentirse imperioso o también despótico.
Redondez
Termino hablando de la redondez que es otra característica de las diferentes familias tipográficas. Originalmente las fuentes de la imprenta eran bastante rígidas y rectas. No hay más que ver el estilo de fuente gótico.
Así es como hoy en día vinculamos la rigidez a lo mecánico, lo formal y lo oficial. Por consiguiente también a lo noble y distinguido.
Sin embargo, por la Gestalt y la psicología de la forma, sabemos que la redondez se vincula mucho con la cercanía, la amabilidad y el confort.
Por eso, ahora es muy común ver tipografías redondas o con bordes suavizados y redondeados que quieren sentirse cercanas y acogedoras.
Por ejemplo Airbnb tiene su propia tipografía y aunque no es la más redonda sí lo es parcialmente. Así la describen en su propia web
Como fuente geométrica sin serifa, el tipo de letra se diseñó con una redondez general que resulta agradable y accesible. Desde una experiencia de lectura precisa en los pesos más ligeros hasta un espíritu llamativo en los pesos más pesados, una cosa es segura: Airbnb Cereal no se toma demasiado en serio a sí misma.
Airbnb sobre Cereal
Por otra parte, incluso sectores fríos como el de los seguros, utilizan este estilo para que los percibamos mucho más cercanos de lo que son.
