La tipografía en el diseño

Figma

Compartir La 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 rápidamente una página web si el contenido no es claro y convincente. Tu equipo creativo trabaja duro para transmitir el mensaje de tu marca en un lenguaje atractivo y accesible. Ahora cuentan contigo para que tomes buenas decisiones tipográficas y de diseño que mejoren la legibilidad y el compromiso con la marca.

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

Qué es la tipografía y por qué es importante
Los 5 tipos de tipografías más populares y los 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 implica crear o seleccionar un sistema de tipografías y fuentes para expresar la palabra escrita. Esta forma de arte creativo puede evocar emociones fuertes, usando letras visualmente atractivas y organizando los tipos para expresar la personalidad de tu marca. Una tipografía bien elaborada 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 fundamental en la creación de sitios web, aplicaciones, correos electrónicos, libros electrónicos y otros contenidos de calidad. Una buena tipografía puede ayudarte a:

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, emparejamientos de fuentes y combinaciones de tipografías coherentes para guiar a los usuarios y mejorar la legibilidad.
Crear reconocimiento de marca. Cuando se utiliza de forma coherente, una buena tipografía ayuda a los usuarios a identificar tu marca mediante la tipografía y los estilos de fuente utilizados en tu contenido de marca.
Reforzar los objetivos de contenido. El espaciado uniforme entre letras, la longitud de las líneas, las 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.

Breve historia de la tipografía

Johannes Gutenberg contribuyó a iniciar la evolución de las tipografías europeas en el siglo XV, cuando inventó la primera impresora con tipos móviles de metal. Gutenberg utilizó caracteres caligráficos antiguos (también conocidos como góticos) para componer líneas de texto más largas para manuscritos y textos religiosos. Los impresores italianos pronto crearon una tipografía más sencilla y compacta, originalmente llamada Antiqua, ahora más conocida como Roman. Los impresores europeos lanzaron entonces las tipografías cursivas, lo que permitió componer 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 las primeras tipografías serif (con serifas) modernas. A estas les siguieron las tipografías sans serif (sin serifas), que dominaron el mundo de la impresión europeo hasta el siglo XX. Fue entonces cuando se impusieron tipografías más nítidas y legibles, como Times New Roman, Futura, Helvetica y Arial. Hoy en día, los diseñadores web y gráficos de todo el mundo tienen acceso a grandes bibliotecas de tipografías y fuentes.

Los 5 tipos de tipografías más populares

Los diseñadores modernos suelen elegir entre cinco tipos de tipografías populares: serif, sans serif, script (manuscritas), display (decorativas) y monoespaciada. 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 los caracteres. Marcas consolidadas como New York Times, Sony y J.P. Morgan optan por una tipografía serif. Entre los ejemplos se incluyen 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). Entre los ejemplos de tipografía sans serif se incluyen Helvetica, Arial y Calibri.
Fuentes script: este tipo de letra fluida y cursiva 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 los caracteres de cada palabra ocupan la misma anchura. Utilizado en el código fuente para facilitar la lectura, 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 añadir 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 estilo de una palabra, una línea de texto o un producto modificando uno o varios 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. Justifica el texto a la izquierda, a la derecha, a ambos lados o centrado, según las necesidades de tu 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 al contenido web para conocer las proporciones de contraste ideales. Los colores más llamativos y brillantes pueden funcionar mejor para encabezados y subtítulos, mientras que los colores neutros son adecuados para bloques grandes de texto.

Asegúrate de que los colores contrasten lo suficiente. Si no es así, prueba con un color de fondo más claro o más oscuro.

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 los espacios en blanco, la alineación de texto, el color y las diferentes tipografías para reforzar la jerarquía visual.

Interletraje

Ajusta el espacio entre las letras individuales para que la distancia parezca uniforme. Un interletraje 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 situada encima. 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 tipografía requiere un ajuste preciso, incluido un espaciado entre líneas cuidadoso.

Interletraje

Puedes mejorar la legibilidad con el interletraje (espaciado entre 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 que se muestran en mayúsculas a veces son más fáciles de leer con un interletraje mayor.

Cómo elegir la tipografía correcta

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

Ten en cuenta el alcance, los requisitos y los objetivos de tu proyecto. Haz preguntas clave a tu equipo sobre el contenido: ¿Cómo vamos a distribuir el contenido (a través de una aplicación, un sitio web, correo electrónico o material impreso)? ¿Quién es nuestro público y cuáles son sus necesidades? ¿Qué tipografías y fuentes utilizan nuestros competidores? Ten en cuenta que algunas tipografías funcionan mejor para los encabezados que para el texto de los menús. 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 sobre los usuarios y la competencia. Para empezar, 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 ordenador o en sitios web como Fuentes de Google. Busca una tipografía con indicios visuales que reflejen lo que quieres que transmita tu producto o marca. Por ejemplo, si el tono de tu marca es más profesional que desenfadado, elige una tipografía sobria 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 utiliza Roboto, una tipografía sans serif nítida y fácil de leer. El módulo de la derecha incluye Almendra, una tipografía basada en la caligrafía que se utiliza a menudo en los libros infantiles.

Ejemplos de cómo las fuentes afectan los elementos visuales — A la izquierda, la tipografía sans serif Roboto. A la derecha, la tipografía decorativa Almendra.

Elige tipografías que se ajusten a la marca y sean llamativas para reforzar 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 tipografías con contenido real y relevante. Esta es la mejor manera de elegir una tipografía que atraiga a tus usuarios. Prueba la tipografía en varios tamaños diferentes para asegurarte de que funcione tanto para texto grande como pequeño.
Pon a prueba los colores de tu marca en tu tipografía. Comienzacolocando texto 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 queda la tipografía sobre fondos blancos y negros. Invierte los colores para ver cómo queda el texto blanco y negro sobre un fondo con el color principal de tu marca.

Lorem Designs: ejemplo de contraste entre el texto y el fondo — Un nombre de marca, Lorem Designs, escrito en Apercu en negro, blanco y el color de la marca en primer plano y fondo.

Peso y estilo

En una tipografía, por ejemplo, Montserrat de Julieta Ulanovsky y su estudio, hay múltiples 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 peso y un estilo de texto concretos. Una tipografía con varios pesos tiene una fuente para cada peso, 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. Una tipografía puede variar en peso desde muy fino hasta ultra negro, con muchos tipos intermedios, mientras que otras tipografías pueden tener solo un peso. Estos pesos también tienen una asociación numérica, lo que resulta útil para comprenderlos a la hora de 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 la 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 opción de estilo y, a veces, solo ofrecen un peso Regular.

Las mayúsculas y minú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 de tipografías tienen letras de ambos tipos, mientras que fuentes como Bangers solo tienen mayúsculas. Las tipografías que solo tienen mayúsculas o solo minúsculas son mucho menos comunes.

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

El estilo tipo título es un estilo mixto en el que todas las palabras de una frase se escriben con mayúscula, a excepción de 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 usa cuando todo el texto está en mayúsculas y se utiliza habitualmente para encabezados, logotipos, texto de botones u otros tipos de etiquetas. Úsalas para enfatizar, en lugar de en textos largos, donde la falta de ascendentes y descendentes puede dificultar la lectura en grandes cantidades. Todo en mayúsculas también se utiliza en internet para dar a entender que se está gritando, por lo que debes 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 distinguir el cuerpo de texto del texto del encabezados, sin embargo, no están disponibles en muchas tipografías.
Todo en minúsculas es una elección estilística que se utiliza en algunos productos y marcas para fines estéticos.

Tamaño

Establecer y cambiar el tamaño de la tipografía 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 variar en función del dispositivo del espectador o de la 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 en ems, una unidad de medida basada en escalas, el tamaño del cuerpo de texto es 1em 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 establecerse en 3em, o tres veces el tamaño del cuerpo de texto, en este caso 48 píxeles. Dado que la página web se va a diseñar para múltiples tamaños de pantalla, los diseños que crees pueden requerir diferentes tamaños de fuente en función del dispositivo del cliente. El desarrollador puede hacer que el tamaño del cuerpo de texto cambie con las dimensiones del navegador de tu cliente, y todo el resto del texto se escalará en consecuencia.

Detalles

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

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

Cuando una o dos palabras quedan al final de un párrafo, se suelen denominar “viudas”. O al principio de la siguiente columna, “huérfanas”.

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

Referirse a una palabra de texto en una línea por sí sola como una “viuda” o “huérfana” es un poco deprimente, sobre todo porque yo soy huérfana. Prefiero llamarla “colgante”.

Es mejor referirse a ellas como “colgantes”.

A medida que se ajustan los cuadros de texto para evitar que sobresalgan, 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 bien diseñado es mantener la coherencia en la ubicación de los objetos en el espacio.

Supongamos que la pantalla de tu aplicación tiene un título que 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 aplicación 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, póster, pantalla de aplicación, infografía, etc., que contenga un logotipo, una imagen, un encabezado y algo del cuerpo de texto. Alinear estos elementos entre sí facilitará que la vista se desplace hacia abajo por la página, pero también hará que la disposición de este contenido parezca meditada e intencionada.

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 sangrado a la derecha.
La justificación a la derecha se produce cuando el final de cada línea de texto queda alineado con el margen derecho. Esto también se conoce como alineación a la derecha y crea un sangrado a la izquierda.
La justificación completa se produce cuando tanto el extremo izquierdo como el 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 sangrado con la justificación completa.
El texto centrado es la ausencia de justificación.