Tipografía en el diseño

Las primeras impresiones son importantes, como bien saben todos los profesionales de las marcas. La mayoría de los usuarios abandonarán una página web muy rápidamente si el contenido no es claro y convincente. Tu equipo creativo trabaja arduamente para transmitir el mensaje de tu marca en un lenguaje atractivo y accesible. Ahora están contando contigo para tomar buenas decisiones de tipografía y diseño para mejorar la legibilidad y el compromiso de la marca.

Sigue leyendo para obtener más información sobre lo siguiente:

• Qué es la tipografía y por qué es importante
• 5 tipos de fuentes más populares, y 6 elementos clave de la tipografía
• Cómo encontrar y explorar tipografías y fuentes con Figma

¿Qué es la tipografía?

La tipografía en el diseño consiste en crear o seleccionar un sistema de tipos de letra y fuentes para expresar la palabra escrita. Esta forma de arte creativa puede evocar emociones intensas, utilizando letras visualmente atractivas y combinando tipos de letra para expresar la personalidad de tu marca. Una tipografía bien diseñada puede mejorar la claridad de la comunicación, facilitando la legibilidad y la comprensión.

¿Por qué es importante la tipografía?

La tipografía desempeña un papel clave en la creación de sitios web, apps, correos electrónicos, eBooks y otros contenidos de calidad. Una buena tipografía puede ayudarte:

• Atraer a los usuarios con tipografías y elementos tipográficos que llamen su atención incluso antes de que empiecen a leer.
• Establecer una jerarquía visual con tamaños de letra, pesos, fuentes con y sin serifas, combinaciones de fuentes y combinaciones tipográficas coherentes para guiar a los usuarios y mejorar la legibilidad.
• Desarrolla el reconocimiento de marca. Cuando se utiliza de manera consistente, una buena tipografía ayuda a los usuarios a identificar su marca a través de la tipografía y los estilos de fuente utilizados para su contenido de marca.
• Sostiene los objetivos de contenido. El espaciado uniforme entre letras, la longitud de las líneas, las letras mayúsculas y minúsculas y otros elementos tipográficos mejoran la legibilidad, mientras que las fuentes utilizadas como elementos de diseño gráfico amplifican el tono y el significado.

Una breve historia de la tipografía

Johannes Gutenberg contribuyó a impulsar la evolución de la tipografía europea en el siglo XV, cuando inventó la primera imprenta con tipos móviles de metal. Gutenberg utilizó letras de caligrafía gótica antigua (también conocidas como blackletter) para componer líneas largas de texto en manuscritos y textos religiosos. Los impresores italianos pronto crearon un tipo de letra más sencillo y compacto, originalmente llamado Antiqua, ahora más conocido como romano. Impresores europeos luego lanzaron tipos de letra en cursiva, componiendo aún más palabras por página.

Avancemos rápidamente hasta finales del siglo XVIII y principios del XIX, cuando aparecieron en el mercado los primeros tipos de letra serif modernos. Las tipografías sans-serif siguieron dominando el mundo de la impresión europea hasta el siglo XX. Fue entonces cuando tipografías más limpias y legibles como Times New Roman, Futura, Helvetica y Arial se hicieron predominantes. Hoy en día, diseñadores gráficos y diseñadores web de todo el mundo acceden a grandes bibliotecas de tipos de letra y fuentes.

5 tipos de tipografías más populares

Los diseñadores modernos suelen elegir entre cinco tipos populares de tipografía: serif, sans serif, script, monoespaciada y display. Cada tipografía incluye una familia de fuentes que abarca los distintos estilos de esa tipografía. Por ejemplo, Helvetica es una tipografía, mientras que Helvetica Light y Helvetica Regular son fuentes.

• Fuentes serif: esta tipografía formal y más tradicional tiene líneas cortas o trazos que se extienden desde los extremos superior e inferior de las formas de las letras. Marcas consolidadas como New York Times, Sony y J.P. Morgan optan por una tipografía con serifas. Algunos ejemplos son Times New Roman y Garamond.
• Fuentes sans serif: esta tipografía sencilla y moderna no incluye los adornos que se encuentran en la tipografía serif. Es una opción popular para marcas juveniles y startups tecnológicas (como Target, Airbnb y Doordash). Algunos ejemplos de tipografías sans serif son Helvetica, Arial y Calibri.
• Fuentes script: este tipo de letra fluido y cursivo puede abarcar desde la caligrafía elegante hasta estilos de escritura a mano divertidos. Aunque no es ideal para el cuerpo de texto, una fuente script funciona mejor para citas, firmas y encabezados cortos. Ejemplos incluyen Snell Roundhand, Pacifico y Scriptina.
• Fuentes monoespaciadas: esta tipografía retro, al estilo de las máquinas de escribir, muestra letras y espaciado de ancho fijo, de modo que cada carácter de cada palabra ocupa el mismo ancho. Utilizado en código fuente para facilitar la legibilidad, la tipografía monoespaciada también aparece en numerosos sitios web y diseños gráficos. Algunos ejemplos son Courier, Bergen Mono y Source Code Pro.
• Fuentes display: también conocidas como decorativas, esta tipografía llamativa puede agregar estilo y originalidad a logotipos, banners y encabezados. Algunos ejemplos de tipografías display son Clearview, Johnston y Skywalker.

Elementos clave de la tipografía

Puedes ajustar el aspecto, la legibilidad y el tono de una palabra, línea de texto o producto modificando uno o más elementos tipográficos.

Alineación

Para lograr un equilibrio y ayudar a los usuarios a desplazarse fácilmente por la página, alinea los elementos de diseño, como el logotipo, las imágenes, el encabezado y el cuerpo de texto. Deja un espacio igual entre cada elemento de diseño y utiliza los márgenes y el espaciado de forma coherente. Justifique su texto a la izquierda, derecha, completamente o al centro según las necesidades de su proyecto. Por ejemplo, los diseñadores pueden centrar un encabezado o una cita breve, pero justificar a la izquierda los textos largos.

Color

Selecciona una paleta de colores que sea coherente con tu marca y transmita claramente tu mensaje. Ajusta la opacidad del texto y utiliza colores complementarios que contrasten bien entre sí para asegurar la legibilidad y accesibilidad. Puedes usar un generador de círculo cromático para crear una paleta de colores bien equilibrada. Consejo profesional: Consulta las Directrices de Accesibilidad para el Contenido Web para conocer las proporciones de contraste ideales. Colores más audaces y brillantes pueden funcionar mejor para encabezados y subtítulos, mientras que los colores neutros son adecuados para bloques de texto grandes.

Jerarquía

Desarrollar una jerarquía en tu tipografía ayuda a priorizar y resaltar la información clave para que sea fácil de escanear y digerir. Haz que los encabezados sean más grandes que los subtítulos y que los subtítulos sean más grandes que el cuerpo de texto. Por ejemplo, el cuerpo de texto de un sitio web suele tener un tamaño de 16 píxeles, mientras que los encabezados H1 suelen tener un tamaño de 48 píxeles. Juega con el espacio en blanco, la alineación de texto, el color y diferentes tipografías para reforzar la jerarquía visual.

Interletraje

Ajuste el espacio entre las letras individuales para que la distancia sea uniforme. El espaciado entre caracteres adecuado ayuda a mejorar el atractivo visual del texto y su legibilidad.

Interlineado

El interlineado se refiere a la altura de la línea, es decir, la distancia entre la línea base de una línea de texto y la línea base de la línea de texto superior. En general, una altura de línea que sea 1,125 y 1,200 veces el tamaño de la fuente (112,5 %–120.0%) ofrece una mejor legibilidad. Dicho esto, cada tipo de letra requiere un ajuste fino, incluyendo un espaciado entre líneas cuidadoso.

Interletraje

Puedes mejorar la legibilidad con el interletraje (también conocido como espaciado de caracteres), que abarca el espaciado general entre las letras de una palabra o línea de texto. Aumenta el interletraje para añadir espacio y disminúyelo para reducirlo. Las palabras o frases escritas en mayúsculas a veces son más fáciles de leer con un mayor interletraje.

Cómo elegir el tipo de letra adecuado

El proceso para elegir una tipografía se divide en los siguientes pasos clave:

• Considera el alcance, los requisitos y los objetivos de tu proyecto. Hazle a tu equipo preguntas clave sobre el contenido: ¿Cómo estamos entregando el contenido (mediante app, sitio web, correo electrónico o material impreso)? ¿Quién es nuestra audiencia y cuáles son sus necesidades? ¿Qué tipografías y fuentes utilizan nuestros competidores? Ten en cuenta que algunas tipografías funcionan mejor para encabezados que para texto de menú. Otras tienen grandes familias de fuentes con escrituras internacionales, glifos y otros caracteres especiales.
• Crea un mood board para desarrollar un tono visual, basado en la investigación de usuarios y competencia. Para comenzar, utiliza la plantilla de mood board de FigJam. Consejo profesional: observar soluciones comparables puede ayudar a identificar patrones y normas útiles.
• Explora opciones de tipografía en tu computadora o en sitios como Google Fonts. Busca una tipografía con señales visuales que reflejen lo que deseas que tu producto o marca transmita. Por ejemplo, si el tono de tu marca es profesional en lugar de informal, elige una tipografía seria con pocos adornos. ¿Cuál de estos ejemplos de Figma Design te parece más Profesional? Si elegiste el módulo de la izquierda, estás en el camino correcto. Ese módulo emplea Roboto, una tipografía sans serif limpia y fácil de leer. El módulo de la derecha incluye Almendra, una tipografía basada en caligrafía que a menudo se usa en libros para niños.

• Elige tipos de letra que sean acordes a la marca y llamativos para apoyar los objetivos de tu proyecto. Ten en cuenta la estructura general de las letras (por ejemplo, altura x, altura de mayúsculas, contornos, ascendentes y descendentes), la capacidad de escalado, la legibilidad, la personalidad y la decoración. Estos elementos influyen en el aspecto general de una tipografía.
• Prueba tus tipos de letra con contenido real y relevante. Esta es la mejor manera de elegir un tipo de letra que involucre a tus usuarios. Prueba la tipografía en varios tamaños diferentes para asegurarte de que funcione tanto para texto grande como pequeño.
• Prueba los colores de tu marca en tu tipografía. Comienza colocandotexto negro sobre un fondo blanco y texto blanco sobre un fondo negro. Luego, aplica el color principal de tu marca al texto y observa cómo funciona la tipografía en fondos tanto blancos como negros. Invierte los colores para ver cómo queda el texto blanco y negro sobre un fondo con el color principal de tu marca.

Peso y estilo

En una tipografía, por ejemplo, Montserrat de Julieta Ulanovsky y su estudio, hay varios estilos y pesos (como regular, negrita, cursiva, fina, negra, etc.) y cada uno tiene una fuente. Una fuente es un archivo que permite instalar y utilizar un conjunto de caracteres con un grosor y un estilo de texto determinados. Una tipografía con varios pesos tiene una fuente para cada grosor, y en conjunto se conocen como familia tipográfica.

La tipografía Montserrat tiene una familia tipográfica de 18 fuentes: fina, fina cursiva, extrafina, extrafina cursiva, ligera, ligera cursiva, regular, regular cursiva, media, media cursiva, seminegrita, seminegrita cursiva, negrita, negrita cursiva, extranegrita, extranegrita cursiva, negra y negra cursiva.

El peso se refiere al grosor del trazo de una letra. Un tipo de letra puede variar en peso, desde muy fino hasta ultranegro, y tener muchos tipos intermedios, mientras que otros tipos de letra solo pueden tener un peso. Estos pesos también tienen una asociación numérica, lo cual resulta útil para comprenderlos al programar o colaborar con un desarrollador. Los pesos suelen corresponder a un número en una escala de 100 a 900, con intervalos de 100: Regular 400, Medio 500, Seminegrita 600, Negrita 700, etc.

El estilo de fuente es el ajuste de los caracteres o mayúsculas y minúsculas, como la cursiva y las mayúsculas, respectivamente. Algunas tipografías no tienen no tienen opción de estilo y, en ocasiones, solo ofrecen un peso Regular.

Las mayúsculas y minúsculas, también conocidas simplemente como "mayúsculas", son la distinción entre letras más pequeñas, como las minúsculas, y letras más grandes, como las mayúsculas. La mayoría de los conjuntos tipográficos tienen letras en ambos formatos, mientras que fuentes como Bangers solo tienen mayúsculas. Las tipografías configuradas solo en mayúsculas o solo en minúsculas son mucho menos comunes.

En inglés, los distintos estilos de mayúsculas se utilizan de manera diferente, dependiendo de las circunstancias:

• Title Case es un estilo de mayúsculas mixtas donde todas las palabras de una oración van con mayúscula, excepto los artículos, las preposiciones cortas y las conjunciones. Estas Excepciones Son Algo Subjetivas.
• La mayúscula al principio de las frases es lo que estamos acostumbrados a ver en los textos, incluida esta frase.
• Todo en mayúsculas se refiere a cuando todo el texto está en mayúsculas y se usa comúnmente en títulos, logotipos de palabra, texto de botones u otros tipos de etiquetas. Utilízalas para enfatizar, en lugar de en textos largos, donde la falta de ascendentes y descendentes puede dificultar la lectura en grandes cantidades. Las mayúsculas también se utilizan en Internet para simular un grito, por lo que se debe evitar su uso en interfaces basadas en chats y conversaciones.
• Las versalitas son similares en forma a las mayúsculas, pero tienen la misma altura que la altura x de la tipografía. Las versalitas se utilizan para diferenciarlas del cuerpo de texto y de los títulos. Sin embargo, muchas tipografías no las incluyen.
• Todo en minúsculas es una elección estilística que se utiliza en algunos productos y logotipos con fines estéticos.

Tamaño

Establecer y cambiar el tamaño de la letra puede ser una decisión difícil. Dependerá en gran medida del medio en el que aparezca el texto, como papel, teléfono móvil o valla publicitaria, y puede cambiar en función del dispositivo del espectador o de la capacidad de adaptabilidad del diseño.

Es importante determinar la jerarquía con tus elecciones tipográficas, utilizando el tamaño como uno de los elementos de énfasis.

En el desarrollo web, es necesario definir algunos tamaños clave, como el del encabezado, el subtítulo, el cuerpo de texto, el menú y el texto del pie de página, etc. Muchos diseñadores comienzan con el tamaño del encabezado, también conocido como H1, pero puede ser útil comenzar con el tamaño del cuerpo de texto, ya que así es como los desarrolladores front-end podrían implementarlo. Cuando un desarrollador trabaja con ems, una unidad de medida basada en el escalado, el tamaño del cuerpo de texto es de 1 em y todos los demás tamaños de texto son múltiplos o fracciones de este.

Por ejemplo, un tamaño de cuerpo de texto común para la web es 16 píxeles. El H1 puede estar configurado en 3em, o tres veces el tamaño del cuerpo de texto, en este caso 48px. Como la página web va a ser diseñada para múltiples tamaños de pantalla, los diseños que crees pueden requerir diferentes tamaños de fuente dependiendo del dispositivo del cliente. El desarrollador puede hacer que el tamaño del cuerpo de texto cambie según las dimensiones del navegador de su cliente, y todo el resto del texto se ajustará proporcionalmente.

Detalles

Gran parte de la tipografía reside en los pequeños detalles y matices.

Por ejemplo, al distribuir texto, uno de los aspectos a examinar es el borde irregular del texto. El borde irregular es el extremo desigual del texto alineado a la izquierda o a la derecha. Se puede manipular aumentando y disminuyendo el ancho de un cuadro de texto o cambiando el espaciado entre letras de todo el cuerpo de texto.

Cuando una o dos palabras quedan al final de un párrafo, generalmente se les llama "viuda". Si quedan al inicio de la siguiente columna, se les llama "huérfana".

Sin embargo, como señala May-Li Khoe:

Es mejor referirse a ellas como "colgantes".

A medida que se ajustan los cuadros de texto para evitar que queden palabras sueltas al final de la línea, también se ajusta la longitud de la línea. Para el cuerpo de texto en inglés, lo ideal para la accesibilidad y la legibilidad es limitar la longitud de la línea a entre 40 y 60 caracteres aproximadamente, incluyendo espacios y signos de puntuación. Si la longitud de las líneas debe ser superior a 60 caracteres, aumenta la altura de línea para mejorar la legibilidad.

Una de las formas más sencillas de conseguir que un documento o una interfaz tengan un aspecto y un funcionamiento bien diseñados es mantener la coherencia en la ubicación de los objetos en el espacio.

Supongamos que la pantalla de tu app tiene un título y que este se encuentra a 100 píxeles de la parte superior del marco o de la pantalla. Quieres que todas las demás pantallas de la app con títulos similares tengan esos títulos en el mismo lugar.

Las guías y las medidas son tus aliadas en este caso: solo tienes que hacer clic y arrastrar desde una regla en Figma para crear una guía, y mantener pulsada la tecla Alt cuando selecciones un objeto para ver la distancia a los objetos que lo rodean.

Ten en cuenta el lado izquierdo, o margen vertical izquierdo, de un sitio web, cartel, pantalla de app, infografía, etc., que contenga un logotipo, una imagen, un encabezado y algo del cuerpo de texto. Alinear estos elementos entre sí facilita el recorrido visual por la página y hace que la disposición del contenido se perciba como deliberada e intencional.

La justificación es un concepto de alineación específico de bloques o líneas de texto.

• La justificación a la izquierda se produce cuando el comienzo de cada línea de texto empieza en el mismo valor x a lo largo del margen izquierdo. Esto también se conoce como alineación a la izquierda y crea un borde irregular a la derecha.
• La justificación a la derecha es cuando el final de cada línea de texto está alineado con el margen derecho. Esto también se conoce como alineación a la derecha y crea un borde irregular a la izquierda.
• La justificación completa se produce cuando los extremos izquierdo y derecho de las líneas de texto quedan alineados con ambos lados del cuadro de texto. El espaciado entre letras y palabras se ajusta para que cada línea de texto tenga un ancho uniforme. No hay desajuste con la justificación completa.
• El texto centrado es la ausencia de justificación.

Comienza tus exploraciones tipográficas con Figma

Figma proporciona recursos de diseño profesionales para que puedas empezar, incluyendo la herramienta de diseño de Figma y un ejemplo de exploración de tipografía. También puedes crear un moodboard de marca utilizando el creador de moodboards de FigJam.

Para más consejos profesionales, consulta el artículo de Figma sobre cómo construir e implementar sistemas de tipografía en Figma.

¿Necesitas inspiración? Consulta la amplia biblioteca de plantillas tipográficas, ejemplos y guías de estilo compartidas por la comunidad de Figma.

¿Todo listo para encontrar una tipografía que realce tu marca?