Este artículo también está disponible en: English (Inglés)
¡Muy buenas! ¿Os acordáis de cómo arrancamos nuestra saga de trucos sobre cómo elegir la paleta de colores adecuada para nuestros proyectos? Pues hoy os traigo la segunda entrega sobre Tipografía, un elemento fundamental del diseño, la imagen de marca y la comunicación.
Elegir una o varias fuentes apropiadas para un proyecto no es nada intuitivo. Si lo fuera no encontraríamos tantos carteles de barrio o flyers de anuncios en Comic Sans; ni tampoco veríamos cartas de restaurantes o take-away combinando más de 3 o 4 tipografías con grados de deformación importantes. Que tengamos recursos a muchas fuentes no significa que debamos usarlas, y que una fuente nos caíga simpática o nos guste especialmente no implica que sea la indicada para enarbolar la comunicación de nuestra marca.
Aprovecho para recordar que sólo tenemos el equivalente a tres segundos para causar una buena impresión cuando entramos en contacto con un lector o usuario nuevo, y la tipografía es un elemento bastante potente a percibir durante ese tiempo.
Me propongo que este artículo os sirva de breve introducción al arte de la tipografía y os enseñe a diferenciar los estilos y lo que transmiten, para así poder usar correctamente un elemento tan fundamental del diseño como es la fuente tipográfica. ¡Empecemos!
¿Qué la Tipografía?
Hoy en día, cuando hablamos de tipografía, usamos la palabra como sinónimo de la fuente tipográfica. Si bien, la Tipografía tradicionalmente se refiere a la tarea u oficio de elegir los tipos (letras diseñadas) para la composición de textos.
Al principio cuando se empezaban a imprimir textos de forma «masiva», lo que se hacía era tallar en madera los bloques enteros o páginas para la impresión. Eso tenía el problema de que como hubiera una errata, para arreglarlo había que retallar la placa entera. Entonces Gutemberg, allá por el 1440, tuvo la idea de crear los tipos móviles (un concepto que, para ser fieles a la verdad, ya existía en China desde el siglo XXI). Los tipos móviles son letras sueltas que se ordenan unas junto a otras para componer textos como en un puzzle, y se pueden reutilizar para cambiar esos contenidos en todo momento. Por eso, aunque al principio se hacían de madera, terminaron por fundirse en metal para que fueran más duraderos a lo largo de numerosas impresiones.
Aquí una servidora se siente muy afortunada de haber podido hacer de tipógrafa a la vieja usanza durante una de sus asignaturas en la Universidad Politécnica de Valencia. Hay un calma especial en la búsqueda de las letras necesarias para tus textos, ordenadas en las cajas de tipos por sus tamaños y conjuntos, y luego la precisión de conectarlas y espaciarlas adecuadamente.
Desde esa forma de imprimir ha llovido mucho, sin embargo, en la era digital seguimos usando numerosos conceptos de la tipografía tradicional -como es el punto como unidad de medida-, y aunque hayamos simplificado enormemente el proceso, nos basamos todavía en principios que elaboraron los grandes tipógrafos y diseñadores de antaño. Otras cosas, sin embargo, las hemos ido adaptando y simplificando para que surtieran a las necesidades de hoy en día.
Ahora que ya estamos situados en contexto, vamos a entrar en el meollo del asunto: en qué consiste una tipogrfía y cómo podemos clasificarlas.
Tipos de tipos: la clasificación tipográfica
Anatomía de una tipografía
El diseño de una tipografía da para una especialización completa y es una tarea compleja en la que no vamos a ahondar, pero quiero presentaros el concepto de anatomía de una tipografía, ya que en función de cómo se distingan las partes de las letras vamos a poder diferenciar las fuentes e incluso establecer categorías para clasificarlas.
En la siguiente infografía tenéis un montón de términos para identificar cómo se llama cada parte de las letras.
Cuando un tipógrafo diseña letras tiene que tener estos elementos en cuenta para que la fuente en conjunto sea coherente y armónica (aunque también puede generar una fuente muy disonante precisamente haciendo deformaciones y contrastes).
En cualquier caso, entre todas estas palabrejas hay algunas especialmente importantes a recordar, como la serifa y las ligaduras, que nos van a ayudar bastante a ver las diferencias entre tipos.
Según la función: textos VS display
Una primera forma de diferenciar tipografías es de acuerdo a su uso destinado, que está muy ligado a la legibilidad. Así, una tipografía en la que prima la estética y la originalidad puede convertirse en una tipo de rótulos (display) muy llamativa, pero sería una mala elección para un bloque de texto largo. Para textos de largo alcance siempre se recomendarán tipografías que sean fáciles de leer y que no llamen mucho la atención por su morfología.
Dentro de esta misma categorización a veces podemos distinguir también entre tipografías para leer textos de largo alcance según su uso sea en imprenta o en pantallas. Generalmente se prefieren las tipografías con serifas para la maquetación de libros y revistas impresas, mientras que en pantalla suelen ser más legibles las de palo seco. Vamos a ver esos conceptos en detalle pero, antes, te recuerdo que en web podemos hacer un control avanzado de las características de las fuentes que renderizamos en los distintos navegadores con algunas propiedades de CSS.
Según la morfología
Otra manera de agrupar las tipografías -la más usada- es según su morfología (anatomía), siendo las dos principales categorías las que aúnan a las tipografías con serifa y sin. Cada grupo grande puede a su vez subdividirse en estilos, que marcan ciertas fuentes por tener características comunes. Vamos a ver estas categorías en sus grandes líneas.
Tipografías Serif o Romanas.
Las tipografías de tipo serif, como su nombre indica, son aquellas en las que las letras están diseñadas con serifas. Son las más tradicionales y ya eran visibles en el arte clásico, por lo que a menudo se las llama romanas. Son especialmente populares para medios impresos y se popularizaron mucho con la aparición del periódico, de ahí que saliera la conocida Times New Roman, diseñada por encargo del Times en los años treinta. Otra más popular hoy en día en procesadores de Microsoft es la Cambria.
Dentro de las Serif, de acuerdo al tipo de serifa y al ratio de grosor entre líneas podemos también subdividirlas en:
- Romanas antiguas: las más romanas de todas, donde las serifas tienden a ser triangulares y se basan en tipografía antiguas grabadas en piedra. Un ejemplo conocido es Garamond, pero también las tipo Times caen en esta categoría.
- Romanas modernas: en estas, en cambio, las serifas suelen ser muy rectas y finas, lineales, y además las letras juegan a menudo con el contraste de trazos finos y gruesos. Entre las populares caen familias como Bodoni o Didot.
- Egipcias o Slab: esta familia engloba las tipografías con serifas gruesas y rectangulares, y son generalmente pesadas, es decir, de estilo bold. Se usan para títulos y rótulos, pero no para textos. Algunos ejemplos son Clarendon o Egyptian Slate.
- Transicionales: algunas personas usan esta denominación para las tipografías con serifas a medio camino entre las antiguas y las más cuadradas, siendo un buen ejemplo Baskerville.
Tipografías Sans-serif o de palo seco.
Este grupo reúne a las tipografías que no tienen serifa, opuestas a las anteriores. También se las llama de palo seco al tener trazos rectos sin ningún detalle, y lineales. Siempre han sido tendencia en el diseño gráfico porque son más moderna, sofisticadas y neutras, de modo que suelen encajar bien con cualquier propuesta. Entre las más populares actualmente podemos mencionar Open Sans, Montserrat, Raleway o Roboto (que es además la oficial de Android).
Al igual que con las serifs, podemos agrupar las distintas propuestas san-serif en las siguientes categorías:
- Geométricas: estas tipografías no tienen ningún tipo de remate y su construcción es rígida, predominando las formas geométricas lo más puras posibles. Se basan en rectas pronunciadas y formas muy geométricas, que las vuelven menos orgánicas que las tipografías recomendadas para textos largos. Son mucho más adecuadas para logos o rótulos. Algunos ejemplos son la conocida Futura, Avant Garde, Poppins o Confortaa.
- Grotescas y Neo-grotescas: son más moduladas que las geométricas, de formas más orgánicas y suaves, de modo que su uso es más generalista. Son muy legibles además en frases cortas o señalizaciones, y dos casos muy populares son Arial y Helvetica. También podemos contar en las mismas tipos como Univers, Karla o, por supuesto, Roboto.
- Humanistas: este el otro extremo del espectro, aquellas fuentes que brillan por ser mucho más orgánicas, con diferencias de grosor en los trazos que las alejan de la rigidez geométrica. Son más agradables a la vista, lo que las hace las preferidas para la lectura de textos largos. Aquí encontramos fuentes como Calibri, Verdana y, más actuales, Corbel, Fira Sans o Segoe UI.
Tipografías Cursivas o Script.
Bajo la categoría script o cursivas entran familias de aspecto muy diferente, pero que tienen en común que inspiran la escritura a mano, a veces tratando de imitar el estilo amanuense. Huelga decir que son poco legibles para textos largos y su uso debería ser moderado para no sobrecargar al lector. Son atractivas, no obstante, para la maquetación de títulos de libros y logotipos.
En este caso es bastante fácil ver las diferencias entre sus subgrupos:
- Gestuales: las que más expresan la fuerza y variedad del trazo hecho a mano, imitando la escritura manuscrita. Entre ellas os propongo Nanum Pen Script, Homemade Apple o Rock Salt.
- Caligráficas: aunque éstas también imitan escritura a mano, lo hacen de forma muy reglada y prolija, como el arte de la caligrafía en sí. En este caso podemos ver una precisión milimétrica en su ejecución. ¿Algunos ejemplos? Kaushan Script, Great Vibes o Sacramento.
- Góticas: no tienen pérdida, son aquellas que recuerdan la escritura antigua y clásica de los amanuenses, con todas sus florituras y detalles. Algunos ejemplos son Perry Gothic, Old London o Cloister Black.
Tipografías Decorativas o de Fantasía.
Ahora ya entramos en una categoría baúl para todo el resto de variaciones tipográficas que no encajan en los tipos anteriores. Suelen tener una enorme personalidad, donde la legibilidad queda relegada al segundo plano. Las tipografías de fantasía o decorativas nos pueden inspirar desde historias medievales de magia hasta universos futuristas, tebeos o películas de terror. Hay que usarlas con cuidado porque a veces resultan excesivas incluso para display. De hecho, en la mayoría de casos estas tipografías se crean con fines muy específicos o marcas que las demandan.
Aquí tienes una muestra de fuentes de fantasía:
Tipografías Dingbat o Dingfonts.
Otra posible categorización reúne a las tipografías cuyos caracteres son símbolos. Quizás te sorprenda saber que Charles Bigelow y Kris Holmes, matrimonio de tipógrafos que diseñaron la fuente Lucida, fueron también los autores tras las fuente Wingdings y, por tanto, los precursores del emoji.
Ellos previeron la necesidad del uso de iconografía tanto para imprenta como en las páginas web, basándose en todos los simbolismos de los textos medievales o los ideogramas asiáticos. Así llegamos a tener una fuente con manos que señalan, calaveras y bombas, que alimentaría entre algunos colectivos teorías conspiranoícas sobre la Guerra Fría y los códigos cifrados.
Hoy en día las fuentes de iconos han evolucionado un montón y tenemos un gran abanico de opciones que nos proveen ilustraciones vectoriales para el uso rápido y sencillo de iconos sin tener que insertar imágenes en nuestros documentos. Probablemente la más conocida sea Font Awesome, pero tenéis muchas más opciones y, además, es muy sencillo crear vuestras propias fuentes personalizadas con los iconos que queráis (un buen tema para un futuro artículo, por cierto).
Y con estas fuentes dejamos de lado la categorización según morfología, aunque antes de cerrar estao de las agrupaciones vamos a mencionar última manera de diferenciar las fuentes: el espaciado.
Según espaciado: las fuentes monoespaciadas
Hasta ahora la gran mayoría de las fuentes de las que hemos hablado tienen letras de anchos distintos. Para que en conjunto siempre parezca que las letras tienen una misma separación, los espacios entre ciertos caracteres son más o menos grandes. Este espacio entre letras se conoce como tracking. Las propias letras también tienen diferente tamaño ya que no ocupa lo mismo una «i» que una «a».
Pues bien, hay un tipo de fuentes que siempre tienen un espacio y un tamaño equivalente entre letras: las monoespacio. Estas fuentes son las que se suelen usar siempre en los procesadores de código, porque permiten una lectura más clara de cada palabra y hacen más fácil la detección de errores. No son especialmente legibles para bloques de texto, pero a nivel unidad de palabra sí.
Las fuentes monoespaciadas se inspiran en la época de la máquina de escribir, que siempre avanzaba una misma cantidad de espacios tras cualquier tecla. En ese estilo, las más conocidas para los usuarios de Windows de antaño son sin duda la Courier y la Courier New. Sin embargo, hoy en día tenemos muchísimas opciones monoespacio sin ese look retro, en incluso ciertas familias tipográficas conocidas como Roboto, PT o Fira tienen sus propias versiones monoespaciadas.
¡Uff, este punto ha sido algo largo pero espero que te haya resultado ameno! Creo que la siguiente infografía es una genial manera de resumir este apartado de forma visual.
El «carácter» de una tipografía
Ahora que ya sabemos cómo podemos diferenciar las fuentes, nos queda saber en qué repercute que sean distintas. Al margen de la legibilidad, las formas de las letras le aportan a la tipografía una determinada personalidad. Al igual que el color genera emociones, las curvas, grosores y florituras de las fuentes también despiertan en los lectores una determinada impresión.
Dicho de otro modo, la fuente que eliges importa, ¡y mucho! Y si no, mira el siguiente ejemplo:
Por lo tanto, aquí retomo una de las advertencias de la introducción: que una fuente nos guste no significa que sea la apropiada para un proyecto. Como en todo acto comunicativo necesitamos saber cuál es nuestro público objetivo y cuál nuestro mensaje. En función de ello podremos orientarnos hacia una tipo u otra.
Cuando veíamos las distintas fuentes hemos comentado que por lo general las fuentes sans-serif tienen un aspecto más moderno y amistoso, mientras que las tipografías de serifa son más clásicas. En la siguiente infografía se amplían y resumen bien las emociones principales de cada estilo de fuente y sus variaciones (como el peso y la inclinación).
Consejos para elegir las fuentes para tu proyecto
Perfecto, pues ya sabemos de dónde parte esto de la tipografía, en qué se diferencian los tipos de letra y cómo esas diferencias generan en el lector una impresión u otra -o dicho de otro modo, cómo consiguen darle carácter a tu marca-.
Sólo me queda darte unas últimas y muy importantes pistas y principios para tu misión de encontrar las tipografías ideales para tu proyecto. ¡Atención a lo siguiente!
1) Los 3 principios de una fuente para la usabilidad.
Se dice que cuando consideramos la tarea de elegir una fuente debemos tener en cuenta tres principios:
- Legibilidad de los caracteres, es decir, la claridad de cada letra respecto a las adyacentes. En este punto tenemos que comprobar que se diferencien bien letras como «b» y «h» o caracteres como el «3» y el «8», y especialmente importante en las tipografías de tipo caligráfico o que imitan tipografías a mano.
- Legibilidad del texto en conjunto, que implica el uso de márgenes, los espaciados de líneas y palabras, los cortes de palabras, etc.
- La estética de la fuente, donde ya entra la sutileza de combinar de forma cuidada y adecuada diferentes familias de tipos y tamaños, así como la composición adecuada de los bloques de texto. En este concepto de estética también podemos hablar de la emoción de la fuente y si se alinea o no a nuestros propósitos.
Yo considero que estos principios nos pueden funcionar especialmente bien como filtros. Cualquier fuente que consideres debería superar esos tres criterios. Y me dirás: «bueno, pero no necesito que una fuente sea legible en conjuntos si sólo la quiero para títulos». Vale, pero, ¿y si mañana resulta que tu proyecto se amplía y te hace falta usar dicha fuente en módulos más largos de texto? Cuidar estos principios desde el primer momento de tu selección tipográfica te asegura la escalabilidad de su uso. ¡Así que no los pases por alto!
2) No mezcles más de dos tipografías distintas.
Esto es crucial. Tener más de dos tipos de letra en tu proyecto distrae al usuario y recarga mucho la experiencia de lectura. Además, se hace mucho más complicado «maridar» adecuadamente más de dos fuentes. Sigue los principios del KISS (Keep it Simple Stupid) y le harás un favor a tus lectores.
3) Haz uso del contraste…
El mandamiento esencial del UX es poder establecer jerarquías de importancia mediante contraste. Lo mismo pasa con los textos. Siempre va a ser más fácil destacar los títulos y la información de interés si consideras desde el principio una jerarquía de importancia en tus tipografías. Haz más fácil para tus usuarios discernir los conceptos esenciales en el texto contrastando las tipografías. ¿Algunos ejemplos?
- Combina tipografías serif con sans-serif.
- Usa diferentes pesos de fuentes.
- Juega con los distintos tamaños.
- Contrasta Mayúsculas/versalitas con la capitalización normal.
- Combina tipografías de distintos anchos.
4) …Pero combina fuentes que generen emociones parecidas.
Contrastar está muy bien, pero sin pasarse. Las fuentes que uses siempre tienen que estar alineadas en carácter y época para generar una impresión similar. Esto suele ser sencillo si tiendes a una tipografía más bien neutra para los cuerpos de texto, y te da libertad de jugar con tipografías que tienen más personalidad para los rótulos. ¡No uses tampoco fuentes demasiado parecidas: los usuarios notarán que son diferentes pero no sabrá diferenciarlas bien!
5) ¡Cuidado con los idiomas!
No todas las fuentes tienen los caracteres de ciertos idiomas. Si escribimos en castellano lo habremos notado ya. Comprueba que la fuente que te gusta soporta acentos y letras como la ñ antes de terminar de encariñarte con ella, porque si tu proyecto es multiidioma te vas a encontrar con un problemón más adelante.
6) Prueba tus fuentes con texto real.
Un corolario del punto anterior. Primero, sabrás si tu fuente se adapta bien o no a tu idioma si usas textos reales, pero además está el tema de que bloques de texto como lorem ipsum no nos permiten evaluar bien si algo la tipografía se adapta bien o no porque: no nos da la longitud real de los párrafos ni nos resulta algo que podamos leer. Nos genera una sensación de desconexión con los contenidos, y eso nos puede afectar a la hora de evaluar si la tipografía ayuda realmente a la lectura o sólo queda bonita. Por eso, eso te recomiendo probar siempre las fuentes con texto real.
7) NUNCA deformes una fuente.
Puedes alterar el espaciado entre caracteres (o tracking), pero nunca deberías modificar la altura o anchura de una fuente como tal. Hacer eso la misma locura que escalar una imagen rompiéndole las proporciones. Aunque no te lo parezca, las tipografías han sido diseñadas con muchísimo esmero, cuidando proporciones y reglas de belleza muy estrictas por parte de sus autores. Agarrar la esquina del cuadro de texto y estirar impunemente sus dimensiones es pecado según cualquier biblia de diseño. ¡Que no me entere yo que lo haces! Si te interesa generar contraste con letras estrechas y anchas, busca tipografías que tengan versión condensada.
8) Recuerda cuidar la accesibilidad.
Creo que siempre es bueno recordar que en nuestro público puede haber gente que tenga más dificultades para leer, ya sea por problemas visuales o intelectuales. Un caso a tener en cuenta cuando pensamos en la tarea de la lectura es la gente con dislexia.
El contraste es un aliado en estos casos, pero también es bueno saber que hay tipografías más sencillas de leer para estos usuarios que otras. En concreto, hay algunas tipografías diseñadas específicamente para estos casos, puesto que el problema de la dislexia es que quienes la padecen muchas veces reflejan letras en su cabeza. Por tanto, cuanto más asimétricas sean, más fáciles resultan de identificar (y por eso Comic Sans también funciona bien con ellos -pero no la uses, porfa-).
Si te interesa el tema puedes echar un vistazo a proyectos tipográficos como Dislexie Font, OpenDislexic, o Read Regular. Te dejo también un enlace a una serie de consejos de la Asociación Británica de Dislexia para generar un entorno amistoso para todos.
9) Evita ciertos tipos de letra.
Por último, hoy en día, si quieres que tu proyecto se tome en serio, te recomiendo evitar ciertas fuentes: algunas porque su diseño es un atentado a la legibilidad y a la elegancia, y otras porque han sido utilizadas tanto que se han convertido en fuentes muy aburridas y repetitivas. Te dejo la siguiente lista con la que coinciden bastantes diseñadores, a evitar:
- Comic Sans
- Papyrus
- Kristen ITC
- Curlz
- Vivaldi
- Impact
- Courier New
- Arial / Helvetica
- Times New Roman
Y, otra vez, dejo aquí una infografía chachi a modo de resumen visual de algunos de estos principios:
¿Dónde encontrar fuentes? Librerías recomendadas.
¡Ahora ya tienes todas las herramientas para elegir con sabiduría! Terminemos el artículo con algunos enlaces que quizás ya conozcas para encontrar fuentes para tus proyectos. Los he separado según ofrezcan tipografías de uso gratuito o tipografías bajo licencia.
Librerías de fuentes open-source y gratuitas:
- Google Fonts: la más accesible y visual. Tiene además una herramienta muy útil ya que te sugiere y permite probar combinaciones populares entre fuentes. Facilita mucho añadir sus fuentes a proyectos web mediante CDN (eso sí, afecta a la privacidad).
- Font Squirrel.
- Font Library.
Librerías de fuentes con licencia:
- DaFont: una de mis librerías preferidas desde hace décadas, algunas de sus tipografías son gratuitas para uso comercial o personal.
- Adobe Fonts (antesTypekit).
- Linotype.
- Fonts.com.
Pequeño extra. Sketchs de College Humor.
Siempre que hablo sobre fuentes recuerdo dos sketchs maravillosos de College Humour que personifican a las tipografías más clásicas. No todo iba a ser estudiar, ¿no?
Font Conference
Font Fight
Y ahora sí, ¡terminamos este post! Espero que te haga la vida más fácil a la hora de encontrar y combinar las tipografías adecuadas. ¿Cuáles son las que vas a elegir? Haznos saber más sobre tus tipografías preferidas y por qué, ¡nos encantará leerte!