Por @jonathanzwhite

La tipografía puede hacer o deshacer su diseño: un proceso para elegir el tipo

Una de las habilidades más importantes que puedes aprender como diseñador es cómo elegir el tipo. Esto se debe a que el texto es una de las principales formas en que los diseñadores pueden comunicarse con los usuarios. La tipografía puede hacer o deshacer un diseño.

Hay una belleza y complejidad en la tipografía. Algunas personas dedican toda su carrera a escribir. Afortunadamente, su trabajo está bien documentado, por lo que tenemos toneladas de recursos en línea para la tipografía.

Este artículo está diseñado para servir como punto de partida para ayudarlo a aprender cómo elegir el tipo para sus diseños. Te animará a explorar fuentes y combinaciones de fuentes más allá de las que estás familiarizado.

Identifica tu propósito

Antes de hacer cualquier otra cosa, primero identifique el propósito de su diseño. ¿Qué información quieres transmitir? ¿Cuál es el medio para su diseño?

Un buen diseño alinea su tipografía con su propósito. Esto se debe a que la tipografía es clave para establecer el estado de ánimo, el tono y el estilo en sus diseños.

Por ejemplo, si está diseñando una tarjeta de felicitación con muchas ilustraciones, elija una fuente que se ajuste al estilo de su ilustración. Armoniza tu tipo con el resto de tu diseño.

Elija una fuente que se adapte al estilo de su ilustración.

Si está diseñando una página de destino basada en imágenes, elija una fuente simple que no reste valor a sus imágenes. Use el tipo como una forma de enfatizar la información para comunicar el significado.

Si las imágenes son el foco de su diseño, elija fuentes simples para que las imágenes se destaquen

Identifica a tu audiencia

Después de determinar el propósito de su diseño, identifique a su audiencia. Este paso es crucial porque la edad y el interés influirán en las opciones de fuente.

Después de aclarar el propósito de su diseño, identifique a su audiencia. Este paso es crucial porque la información sobre sus usuarios, como la edad, los intereses y la educación cultural, podría influir en las decisiones que tome para su tipo.

Por ejemplo, algunas fuentes son más apropiadas para niños. Cuando aprenden a leer, los niños necesitan fuentes muy legibles con generosas formas de letras. Un buen ejemplo de esto es Sassoon Primary. La Primaria Sassoon fue desarrollada por Rosemary Sassoon y se basó en su investigación sobre qué tipo de cartas les resultaban fáciles de leer a los niños.

Sassoon Primary fue desarrollado Rosemary Sassoon

Otras fuentes son más apropiadas para personas mayores. Las fuentes para personas mayores utilizan tamaños legibles, colores de alto contraste y evitan guiones y estilos decorativos.

Al elegir el tipo, tenga en cuenta su audiencia y sus necesidades. En pocas palabras, empatizar con sus usuarios.

Buscar inspiración

Mira el trabajo de otros diseñadores. Intenta entender cómo tomaron sus decisiones sobre el tipo.

Fuente de inspiración

Para inspiración de fuentes, The 100 Best Free Fonts de CreativeBloq es un gran artículo para ponerlo en la mentalidad correcta para elegir el tipo. En el artículo, CreativeBloq explica las motivaciones detrás de cada fuente.

Otro recurso útil es la colección de 100 mejores fuentes gratuitas para 2015 de Awwwards.

Invision también compiló un repositorio gigante de recursos de tipografía. Encontrarás muchas fuentes de inspiración allí.

Typ.io selecciona la fuente de inspiración de toda la web

Para inspirarte en sitios web reales, visita Typ.io. El sitio cura la inspiración de fuentes de toda la web. Además, el sitio proporciona definiciones de fuentes CSS en la parte inferior de cada muestra de inspiración.

Además de mirar sitios web dedicados a la inspiración de fuentes, visite sus sitios favoritos y vea qué fuentes usan. Una buena herramienta para esto es WhatTheFont. WhatTheFont es una extensión de Chrome que le permite inspeccionar las fuentes web al pasar el mouse sobre ellas.

Inspiración de emparejamiento

Más allá de solo las fuentes, también mira la inspiración del emparejamiento de fuentes. El emparejamiento de fuentes es tan importante como las fuentes mismas. Un buen emparejamiento de fuentes ayuda a establecer la jerarquía visual y mejorar la legibilidad de sus diseños.

El emparejamiento de fuentes es tan importante como las fuentes mismas

Para inspirarte, comienza con Typewolf. Typewolf selecciona la combinación de fuentes de inspiración de diferentes sitios. Más allá de eso, también tienen recomendaciones de fuentes y guías de tipografía en profundidad. Es un tesoro para los tipógrafos.

FontPair también cura la inspiración del emparejamiento de fuentes, específicamente para Google Fonts. Puede ordenar por combinaciones de estilo de tipo como sans-serif y serif, o serif y serif.

Por último, hay toneladas de colecciones de pares de fuentes creadas por diseñadores en línea. Por ejemplo, Tipografía: Combinaciones de fuentes de Google y Tipografía: Combinaciones de fuentes de Google Volumen 2. Simplemente busque "emparejamiento de fuentes" en sitios como Behance y Dribbble.

Elige tus fuentes

Armado con investigación e inspiración, estás listo para elegir tu tipo. Cuando se trata de elegir el tipo, tenga en cuenta los siguientes principios: legibilidad, legibilidad y propósito.

Antes de elegir una fuente, investigue su propósito

Elija fuentes que sean convencionales y fáciles de leer. Evite las fuentes altamente decorativas en favor de las fuentes simples y prácticas. Además, tenga en cuenta el propósito de una fuente. Por ejemplo, algunas fuentes son más adecuadas para ser encabezados que para texto de cuerpo.

Por esta razón, antes de elegir una fuente, investigue su propósito.

Combina fuentes que se contrastan

En términos de emparejamiento de fuentes, manténgalo simple con un máximo de tres fuentes diferentes. Además, empareje las fuentes que se contrastan entre sí. Hacerlo ayudará a guiar los ojos de los lectores, primero a los encabezados y luego a los textos corporales. También puede crear contraste visual utilizando diferentes tamaños de fuente, colores y pesos.

Para las fuentes web, puede usar Google Fonts, Typekit y Font Squirrel. Google Fonts es gratis, Typekit y Font Squirrel tienen fuentes gratuitas y de pago.

Determinar tamaños de fuente

El siguiente paso después de decidirse por una combinación de fuentes es determinar el tamaño. Una gran herramienta para esto es Modular Scale de Tim Brown, el jefe de tipografía de Adobe. Escala modular es un sistema para identificar proporciones históricamente agradables para crear escalas para determinar los tamaños de letra.

Escala modular es un sistema para identificar proporciones históricamente agradables para crear escalas para determinar los tamaños de letra

Por ejemplo, puede usar una escala basada en la proporción áurea. Estas serían sus primeras cinco opciones de tamaño de fuente calculadas:

Proporción de oro (1: 1.618)
1.000 x 1.618 = 1.618
1.618 x 1.618 = 2.618
2.618 x 1.618 = 4.236
4.236 x 1.618 = 6.854
6.854 x 1.618 = 11.089

Un problema que puede encontrar es que su proporción es demasiado grande. Eche un vistazo a lo que sucede con los intervalos posteriores de nuestra escala en función de la proporción áurea.

Proporción de oro (1: 1.618)
...
11.089 x 1.618 = 17.942
17.942 x 1.618 = 29.03
29.030 x 1.618 = 46.971
46,971 x 1,618 = 75,999
75.999 x 1.618 = 122.966

Como puede ver, los intervalos entre los números comienzan a ser demasiado grandes. Para la mayoría de las interfaces, necesita intervalos más pequeños. Afortunadamente, Modular Scale tiene una variedad de proporciones basadas en geometría, naturaleza y música.

Menor Segundo 15:16
Segundo mayor 8: 9
Menor tercero 5: 6
Tercero mayor 4: 5
...

Entonces, en lugar de usar la proporción áurea, puede usar una proporción que produzca intervalos más pequeños como el Cuarto Perfecto.

Cuarto perfecto (3: 4)
...
9.969 x 1.333 = 13.288
13.288 x 1.333 = 17.713
17.713 x 1.333 = 23.612
23.612 x 1.333 = 31.475
31.475 x 1.333 = 41.956
41.956 x 1.333 = 55.927

Una vez que se haya asentado en una escala, puede elegir los tamaños de fuente de su lista y redondearlos al decimal más cercano.

Tamaños de fuente
Encabezado 1: 55px
Encabezado 2: 42px
Encabezado 3: 31px
Encabezado 4: 24px
Encabezado 5: 14px
Cuerpo: 17px
Subtítulo: 14px

El método de Escala Modular usa precisión matemática para generar tamaños de fuente. Sin embargo, es solo una guía. Use este método como punto de partida y luego ajuste los tamaños con su ojo.

Crear una guía de estilo de tipografía

El último paso del proceso es crear una guía de estilo para su tipografía para ayudar a estandarizar el tipo en sus diseños.

Estilos compartidos en Sketch

En programas como Sketch, puede crear estilos de texto compartidos para insertar rápidamente texto con estilos ya aplicados desde su guía.

Es durante este paso del proceso que puede ajustar y finalizar sus atributos de texto, como el color, el peso y el tamaño.

Una palabra sobre el color: al elegir el color, tenga en cuenta su paleta de colores. Elija colores para su tipo que armonicen con su paleta de colores.

Use guías de estilo para estandarizar el tipo en sus diseños

En su guía de estilo, asegúrese de incluir al menos lo siguiente: definiciones de fuente, tamaños de fuente, colores de fuente y usos de ejemplo.

Las pautas de tipografía de diseño de materiales de Google son un buen ejemplo de qué incluir en una guía de estilo. Otros ejemplos incluyen las guías de tipografía de Mailchimp, Apple y Focus Labs.

La tipografía tiene que ver con la experimentación. Es a la vez una ciencia y un arte.

Te desafío a salir de tu zona de confort y explorar el tipo en tu diseño.

¿Cuáles son tus fuentes favoritas? Déjame una nota o envíame un tweet en Twitter.

Si te ha gustado este artículo, también puedes disfrutar de CSS en Javascript con Aphrodite, una biblioteca de Khan Academy.

Puedes encontrarme en Medium donde publico todas las semanas. O puede seguirme en Twitter, donde publico divagaciones no sensoriales sobre diseño, desarrollo front-end y realidad virtual.

PD Si disfrutaste este artículo, significaría mucho si haces clic en y lo compartes con amigos.