10 formas de mejorar la tipografía de tus diseños

57-Mejora -tu-tipografia

La tipografía es mucho más que sólo elegir una fuente y un tamaño en un menú desplegable de tu computadora.

Es un arte y una habilidad cuya historia se remonta varios siglos atrás, a la época de los tipos metálicos y de madera de las prensas de impresión. Y, aunque podemos aprender del largo legado histórico de la tipografía, a la mayoría de nosotros también nos vienen bien algunos consejos prácticos para mejorar el aspecto de nuestra tipografía en proyectos cotidianos como currículums, boletines y tarjetas de presentación.

New Perspective

¿Tú encajas en este grupo? Entonces estás en el lugar correcto. Este artículo te mostrará 10 trucos y tips para mejorar tu uso de las fuentes en tus proyectos de diseño. ¡Comencemos!

01. Adapta el tono a tu mensaje

¿Crees que todas las fuentes se ven más o menos iguales? ¿O quizás tienes una fuente favorita y la usas todo el tiempo? En cualquier caso, quizás no estás sacándole el máximo partido a tus selecciones de fuentes.

Gráfico original de Canva

Decimos esto porque cada tipografía tiene un tono y una personalidad propios. Quizás tu fuente es amigable, elegante, seria o ridícula. En todo caso, la mayoría de las fuentes no sirven para todos los propósitos, así que tendrás que descubrir qué te transmite esa fuente específica y decidir si encaja con tu diseño. Una buena forma de hacer esto es hacer una lluvia de ideas con las cualidades o características que quieres que tu diseño comunique. Esto funciona aún mejor si planeaste tu contenido de antemano: así podrás hacer que tus selecciones de fuente coincidan con el tono ya establecido por tu texto.

Tal como lo expresa el diseñador tipográfico Eben Sorkin: cada fuente tiene su propia voz. Esta voz influye en lo que sentimos por el texto que estamos leyendo, pero también en nuestra capacidad de absorber y procesar la información:

“También puede ser una poderosa herramienta para que cualquier tipo de comunicación textual se vuelva más eficiente y persuasiva… cuando la personalidad de la fuente coincide con la personalidad del texto, la gente puede leer el texto más fácil y rápidamente. Cuando no es así, es irritante y se entorpece la lectura. Mientras más fácil sea la lectura para los visitantes, éstos tendrán más probabilidades de encontrar lo que buscan, navegar, comprar y/o volver [o darle seguimiento a cualquiera que sea el propósito del diseño]”.

Algunos ejemplos rápidos:

Una combinación de fuentes vintage pero modernas para un producto para el cabello elaborado con una receta de “tiempos pasados”.

Diseño: Device Creative Collaborative.

Una estética y un tratamiento tipográfico minimalistas y de inspiración suiza para un producto que aboga por el regreso a lo esencial.

Diseño: Salih Kucukaga.

Selecciones tipográficas que comunican historia y trabajo artesanal: una mancuerna visual tanto para las palabras deletreadas como para la identidad visual de todo el negocio.

Mike Casebolt y Sergey Grigoryan.

Estas clásicas tipografías con serifa parecen una buena elección para el blog de una editorial tradicional que ha estado en el mercado desde 1925. Sin embargo, la legibilidad, claridad y diseño accesible de las fuentes les dan un toque moderno y las vuelven prácticas para la web.

Random House Books

02. Adapta el tono a tu audiencia

Así que ya escogiste una fuente que crees que cumple perfectamente con los propósitos de tu diseño. ¡Genial! El único problema es que… no todo el mundo va a interpretar el tono de una fuente de la misma manera. Después de elegir una fuente que vaya bien con tu diseño, tendrás que asegurarte de que es la apropiada para tu audiencia.

Una misma fuente puede estar a la moda para un grupo de personas y a otro grupo puede parecerle anticuada. Esto sucede porque nuestra percepción de las fuentes está fuertemente influenciada por las asociaciones culturales, y éstas tienen que ver con la edad y la ubicación geográfica. Así que es importante ser receptivo a la perspectiva del grupo demográfico para el que estás diseñando y, si tienes dudas sobre tu selección de fuentes, quizás incluso podrías pedirle su opinión a un miembro de ese grupo.

Minted

Diseños: Peetie Design y Kelly Schmidt.

Pero, ¿qué sucede cuando estás diseñando para un amplio grupo de personas y no para una audiencia específica? Quizás debas optar por una tipografía más neutral, una que no tenga una personalidad obvia, sino que más bien se funda con el entorno. A este tipo de fuentes a menudo se les conoce como “caballitos de batalla” y generalmente son fuentes básicas con o sin serifa que se pueden usar prácticamente donde sea porque no llaman mucho la atención por sí mismas.

Algunas tipografías versátiles disponibles en Google Fonts.

Las más útiles vienen con una variedad de grosores (delgada, regular, media, negrita) y estilos (estrecha, condensada, extendida o versalitas). Hemos recomendado una buena cantidad de fuentes gratuitas y neutrales en la categoría Fuentes de The Design School. (¡Ahí también podrás encontrar otros recursos geniales relacionados con la tipografía!)

03. Adapta el tamaño de la fuente al contexto del diseño

La legibilidad debe ser una de tus principales preocupaciones al elegir y organizar las fuentes de un diseño. La idea no es que tu audiencia se frustre al tratar de leer un texto demasiado pequeño… o irritantemente grande, para el caso. Como regla de oro, el texto del cuerpo debe ser de entre 10 y 12 puntos para proyectos impresos, y de entre 15 y 20 pixeles para la web (el tamaño predeterminado de casi todos los navegadores es de 16 pixeles). El tamaño ideal puede variar un poco dependiendo de las características y la estructura particular de cada tipografía.

Puedes usar Type Scale, una herramienta gratuita que te permite previsualizar cómo se ven tus selecciones de Google Fonts en varios tamaños web.

¿Qué pasa con otros tipos de texto que no están hechos para ser leídos con detenimiento? Aquí deberás guiarte con el contexto del diseño (su tamaño físico y/o la forma en la que vas a presentarlo o exhibirlo) y con un poco de sentido común. Los proyectos pequeños (las tarjetas de presentación, por ejemplo) o los pasajes largos de texto requerirán fuentes más pequeñas, pero éstas también deberán ser claras y legibles antes que decorativas.

Diseño: Anagrama.

Los proyectos más grandes (como los pósteres) admiten fuentes más grandes porque hay más espacio para trabajar y porque la gente generalmente los ve desde lejos. En los proyectos que tienen relativamente poco texto, quizás tendrás la oportunidad de ponerte un poco más creativo y estilizado con tus selecciones de fuentes, aunque esto dependerá del contexto y de tu audiencia.

Diseño: GrandArmy.

04. Establece una jerarquía

Un diseño tiene una jerarquía adecuada cuando está bien organizado y es fácil recorrerlo visualmente para encontrar la información que necesitas. La jerarquía tipográfica es especialmente importante en los diseños con mucho texto, tales como boletines, revistas, libros y otras publicaciones impresas tradicionales, así como en algunas páginas web.

Extraído de los “50 Conceptos de diseño explicados de manera sencilla para los no-diseñadores”, de Canva.

Los principios básicos para establecer una jerarquía en tu diseño involucran lo siguiente:

  • Usar el texto para priorizar la información de acuerdo a su importancia.
  • Dejar suficiente espacio para crear una estructura fácil de recorrer.
  • Agrupar los elementos relacionados.
  • Incluir secciones claras (con encabezados, subtítulos, etc.) siempre que sea necesario.

Diseño: Pawel Kadysz. Vía Dribbble.

Para entender la jerarquía tipográfica a profundidad, asegúrate de saber ¿Por qué todos los diseños necesitan tres niveles de jerarquía tipográfica?

05. No descuides el espaciado y la alineación

Los detalles pueden construir (o destruir) un diseño. Y el espaciado y la alineación son de los detalles que más impacto tienen sobre el diseño: pueden hacer la diferencia entre un diseño confuso y abarrotado y uno limpio y ordenado.

Primero hablemos de algunos de los tipos de espaciado más comunes:

Tracking: también conocido en español como prosa, el tracking es el espacio horizontal fijo que hay entre todas las letras de un pasaje de texto (quizás una oración o un párrafo). Ajustar el tracking hará que tu texto se vea más “apretado” o más “suelto”. Es común disminuir el tracking para ahorrar espacio en un diseño, pero esto puede dificultar la legibilidad. La mejor manera de preservar la legibilidad es encontrar un término medio que vaya bien con tu fuente: ni muy apretado ni muy suelto.

Gráfico original de Canva.

Interlineado (o leading, en inglés): es el espacio vertical que separa las líneas de un texto. Al igual que con el tracking, establecer un interlineado muy extremo dificulta la legibilidad del texto y hace que el diseño se vea raro.

Gráfico original de Canva.

Márgenes: es el espacio vacío que hay en los bordes de tu diseño. A no ser que quieras crear un efecto específico e intencional, no es bueno que parezca que tu texto se va a salir de la página (o de la pantalla). Para hacer más cómoda la lectura, deja una cantidad generosa de espacio vacío alrededor de los bordes.

Espacio en blanco: este término se utiliza para referirse a cualquier espacio vacío o en blanco dentro de tu diseño. Cuando tienes mucha información por acomodar, puede parecer que el espacio en blanco es un desperdicio, pero en realidad es parte fundamental de cualquier diseño equilibrado y organizado. Hace que los ojos del espectador puedan fluir a través del diseño y también les da un lugar para descansar.

Diseño: Dann Petty. Vía Dribbble.

En lo que se refiere a la alineación, la mejor manera de mejorar tu tipografía es ser coherente. Si mezclas distintos estilos de alineación de texto (izquierda, derecha, centrada, justificada, etc.) sin ninguna lógica ni propósito, sólo conseguirás que el diseño se vea desaliñado.

Gráfico original de Canva.

Un par de tips rápidos:

  • Evita la alineación justificada. Casi siempre crea un espaciado irregular y segmentos aleatorios en blanco que se ven descuidados y dificultan la lectura.
  • Elige un estilo para tu texto del cuerpo (lo más típico es el alineado a la izquierda) y apégate a él.

Diseño: Bryan Kidd. Vía Dribbble.

06. Aprende a ajustar el kerning

Existe otro tipo de espaciado que se ignora muy frecuentemente: el kerning. A veces se confunde al kerning con el tracking, pero son diferentes: el kerning es el espacio que hay entre pares únicos de letras u otros caracteres.

Gráfico original de Canva.

A menudo, el kerning es lo último que debes revisar para asegurarte de que tu tipografía se vea tan pulida y profesional como sea posible. Cada fuente viene diseñada con un kerning predeterminado, pero a veces esos ajustes no son ideales para ciertas combinaciones de letras. Especialmente cuando tengas tipografías grandes y visibles como las de un encabezado, seguramente querrás comprobar visualmente que no haya pares de letras que se vean muy apretados o muy sueltos. Y después, si es necesario, querrás ajustar manualmente el kerning.

¿Quieres saber más sobre el kerning? En nuestra Guía básica para ajustar el kerning como un profesional encontrarás una introducción exhaustiva. Incluso incluimos un enlace a un juego en línea que te ayudará a afinar tus habilidades con el kerning.

Juego KernType

07. Limita tu número de fuentes, grosores y estilos

A todos nos encantan nuestras fuentes, pero incluso las cosas buenas pueden hartarnos. Un diseño con muchas tipografías diferentes se puede ver amateur y desastroso.

Gráfico original de Canva.

Como regla de oro, lo seguro es no apostarle a más de tres fuentes distintas en un solo diseño. Sin embargo, esta “regla” se puede romper cuando se usa en el contexto adecuado (por ejemplo: para crear un estilo ecléctico y vintage como el del siguiente diseño).

Diseño: Adam Schneider. Vía Dribbble.

Si buscas un punto de partida para combinar fuentes, una fuente básica sin serifa casi siempre va bien con una fuente con serifa. Otra opción es elegir una sola tipografía o familia tipográfica que venga con varios grosores y estilos: así tu tipografía se verá coherente, pero todavía podrás elegir variaciones.

Alegreya Sans, una familia tipográfica gratuita de Huerta Tipografica.

Y esto nos lleva a nuestro siguiente consejo…

Puede ser fácil abusar de estos grosores y estilos (como las negritas, itálicas o letras capitales). Estos estilos pueden ser geniales para ponerle énfasis al texto, quizás para resaltarlo visualmente, para mostrar su importancia o para imitar los patrones del habla. Sólo evita usar todos en un mismo pasaje de texto: se ve como si te estuvieras esforzando mucho para comunicar tu mensaje y algunos lectores pueden interpretar el esfuerzo como una grosería. Será rara la ocasión en la que necesites usar más de un único estilo.

08. Evita los “crímenes tipográficos” comunes

Los programas de diseño pueden ayudarnos a hacer cosas increíbles, pero también, si no tenemos cuidado, nos facilitan cometer algunos pecados tipográficos. Ellen Lupton, la autora de Pensar con tipos, comparte en la página web que acompaña a su libro algunos malos hábitos que debemos romper. Revisemos algunos:

No estires las palabras o las letras para forzarlas a encajar en un espacio. Cuando estiras tu tipografía vertical u horizontalmente, se distorsionan las proporciones y las formas de las letras. Una mejor alternativa es escalar proporcionalmente la tipografía para conservar su aspecto original.

Vía Thinking with Type.

No uses las comillas mecanográficas. Las comillas mecanográficas, esas que son marcas rectas y verticales, se sustituyen generalmente por verdaderas comillas tipográficas: las clásicas comillas inglesas o curveadas. La mayoría de los procesadores de texto y programas de diseño se pueden configurar para usar comillas curvas, o también puedes usar atajos de teclado.

Incluso hay una página web que promueve el uso correcto de las comillas.

No hagas itálicas falsas. Si una fuente no viene con itálicas, es muy fácil usar un programa de diseño para sesgar la fuente y hacer que se vea (más o menos) itálica. Lupton les llama “pseudoitálicas”. Sin embargo, en realidad esta técnica distorsiona las letras y generalmente se ve muy mal. Las verdaderas itálicas se diseñan por separado para complementar a la fuente regular y siempre son una mejor opción.

Extraído del Glosario ilustrado de términos tipográficos de Canva

09. Comprueba que no haya fondos o colores conflictivos

Es raro que la tipografía esté aislada en un diseño. Más bien interactúa con otros elementos, especialmente con el fondo. Para que la tipografía tenga buena visibilidad, es importante que exista suficiente contraste entre el texto y el resto del diseño. Pero hay un par de cosas que pueden atenuar el contraste:

  • Colores conflictivos: si estás poniéndole color a tu tipografía, querrás asegurarte de que el color sea un buen complemento para los otros elementos del diseño, incluyendo el fondo. Si los colores son muy diferentes (piensa en una molesta ventana emergente con texto verde neón sobre un fondo rojo) o incluso si son muy parecidos (por ejemplo, texto blanco sobre un fondo claro) los ojos pueden sufrir y la visibilidad puede ser mala.

En lugar de eso, intenta ligar el color del texto al esquema de color existente para crear un aspecto armonioso:

Diseño: STUDIO–JQ. Vía Dribbble.
  • Fondos con patrones o con muchos elementos: de la misma manera, un fondo que tiene muchos elementos puede dificultar la lectura de cualquier texto, y la idea no es que los espectadores se frustren con un diseño en el que no pueden encontrar la información que necesitan.

En lugar de eso, trata de usar los patrones en el borde o en algún lugar en el que no le estorben a la tipografía.

Diseño: Szende Brassai / Adline. Vía Dribbble.
  • Efectos especiales: las transparencias, las deformaciones y otros efectos pueden ser divertidos e incluso útiles en ciertas circunstancias. Pero también es fácil abusar de ellos. A veces nos centramos tanto en el proceso de diseño que tomamos decisiones que crean cierto aspecto, pero que no son muy prácticas.

En lugar de eso, trata de ponerle efectos al texto sólo cuando vayan en consonancia con el diseño. No se los pongas sólo porque puedes.

Diseño: David M. Smith. Vía Dribbble.

Para resumir, asegúrate de tener siempre en mente la visibilidad y la legibilidad de tu tipografía mientras pruebas con distintos enfoques creativos.

10. Observa y practica

Una de las mejores maneras de mejorar tu tipografía es prestar atención a lo que los otros diseñadores hacen con la suya. La tipografía es una habilidad que requiere de práctica y de desarrollar un buen ojo para detectar lo que funciona y lo que no, así que permanece atento a la buena tipografía: nunca sabes dónde podrías encontrártela: en los señalamientos del metro o en los estantes del supermercado.

Entonces, ¡ahora te toca a ti! Esperamos que estos lineamientos y consejos te sirvan para impulsar tus habilidades tipográficas. Y, como siempre, ¡feliz diseño!

La mejor herramienta para crear diseños increíbles