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

Una de las habilidades más importantes que puede 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 mecanografiar. Afortunadamente, su trabajo está bien documentado, por lo que tenemos toneladas de recursos en línea para tipografía.

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

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 de tu diseño?

El 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 de sus diseños.

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

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. Utilice la tipografía como una forma de enfatizar la información para comunicar significado.

Identifica 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 sus 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. Al aprender a leer, los niños necesitan fuentes muy legibles con formas de letras generosas. Un buen ejemplo de esto es Sassoon Primary. Sassoon Primary fue desarrollada por Rosemary Sassoon y se basó en su investigación sobre el tipo de letras que los niños encontraban fáciles de leer.

Otras fuentes son más apropiadas para personas mayores. Las fuentes aptas 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, empatía con tus usuarios .

Buscar inspiración

Mira el trabajo de otros diseñadores. Intente comprender cómo tomaron sus decisiones por tipo.

Inspiración de fuente

Para inspirarse en las fuentes, Las 100 mejores fuentes gratuitas de CreativeBloq es un gran artículo que lo pondrá 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 las 100 mejores fuentes gratuitas de 2015 de Awwwards.

Invision también compiló un repositorio gigante de recursos tipográficos. Allí encontrará muchas fuentes de inspiración.

Para inspirarse en sitios web reales, consulte Typ.io. El sitio selecciona fuentes de inspiración de toda la web. Además, el sitio proporciona definiciones de fuentes CSS al final de cada muestra de inspiración.

Además de buscar sitios web dedicados a la inspiración de fuentes, visite sus sitios favoritos y compruebe qué fuentes utilizan. Una buena herramienta para esto es WhatTheFont. WhatTheFont es una extensión de Chrome que le permite inspeccionar las fuentes web colocando el cursor sobre ellas.

Inspiración de emparejamiento

Más allá de las fuentes, también busque la inspiración para combinar fuentes. El emparejamiento de fuentes es tan importante como las propias fuentes. Una buena combinación de fuentes ayuda a establecer una jerarquía visual y mejorar la legibilidad de sus diseños.

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

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

Por último, hay toneladas de colecciones de emparejamiento de fuentes creadas por diseñadores en línea. Por ejemploTipografí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.

Elija sus fuentes

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

Elija fuentes que sean convencionales y fáciles de leer. Evite las fuentes muy decorativas en favor de 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 el cuerpo del texto.

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

In terms of font pairing, keep it simple with a maximum of three different fonts. In addition, pair fonts that contrast one another. Doing so will help guide the eyes of readers, first to headers and then to body texts. You can also create visual contrast using different font sizes, colors, and weights.

For web fonts, you can use Google Fonts, Typekit, and Font Squirrel. Google Fonts is free, Typekit and Font Squirrel have free and paid fonts.

Determine font sizes

The next step after settling on a font combination is determining sizing. A great tool for this is Modular Scale by Tim Brown, the head of typography at Adobe. Modular Scale is a system for identifying historically pleasing ratios to create scales to determine type sizes.

For example, you might use a scale based on the golden ratio. Here would be your first five computed font size options:

Golden Ratio (1:1.618)
1.000 x 1.618 = 1.6181.618 x 1.618 = 2.6182.618 x 1.618 = 4.2364.236 x 1.618 = 6.8546.854 x 1.618 = 11.089

One issue that you might encounter is that your ratio is too large. Take a look at what happens to the later intervals of our scale based on the golden ratio.

Golden Ratio (1:1.618)
...11.089 x 1.618 = 17.94217.942 x 1.618 = 29.0329.030 x 1.618 = 46.97146.971 x 1.618 = 75.99975.999 x 1.618 = 122.966

As you can see, the intervals between numbers start to become too large. For most interfaces, you need smaller intervals. Thankfully, Modular Scale has a variety of ratios based on geometry, nature, and music.

Minor Second 15:16 Major Second 8:9Minor Third 5:6Major Third 4:5...

So instead of using the golden ratio, you can use a ratios that yield smaller intervals like the Perfect Fourth.

Perfect Fourth (3:4)
...9.969 x 1.333 = 13.28813.288 x 1.333 = 17.71317.713 x 1.333 = 23.61223.612 x 1.333 = 31.47531.475 x 1.333 = 41.95641.956 x 1.333 = 55.927

Once you have settled on a scale, you can cherry pick font sizes from your list and round them to the nearest decimal.

Font Sizes
Header 1: 55pxHeader 2: 42pxHeader 3: 31pxHeader 4: 24pxHeader 5: 14px
Body: 17pxCaption: 14px

The Modular Scale method uses mathematical precision in order to generate font sizes. However, it’s only a guide. Use this method as a starting point and then adjust sizes with your eye.

Create a typography styleguide

The last step of the process is to create a styleguide for your typography to help standardize type across your designs.

In programs like Sketch, you can create shared text styles to quickly insert text with styles already applied from your guideline.

It’s during this step of the process that you can tweak and finalize your text attributes such as color, weight, and size.

A word on color: when choosing color, take into account your color palette. Choose colors for your type that harmonize with your color palette.

In your styleguide, make sure to at least include the following things: font definitions, font sizes, font colors, and example usages.

Google’s Material Design typography guidelines is a good example of what to include in a styleguide. A couple of other examples includes the typography guides of Mailchimp, Apple, and Focus Labs.

Typography is all about experimentation. It’s both a science and an art.

I challenge you to break out of your comfort zone and explore type in your design.

What are your favorite fonts? Leave me a note or send me a tweet on Twitter.

If you enjoyed this article, you might also enjoy CSS in Javascript with Aphrodite, a library by Khan Academy.

CSS in Javascript: The future of component based styling

This week, I want to introduce you to the concept of CSS in Javascript with Aphrodite by Khan Academy. Aphrodite lets…medium.com

You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.

P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.