72

Guía para elegir y trabajar con tipografía

8225Puntos

hace 2 a

Curso de Diseño de Interfaces y UX
Curso de Diseño de Interfaces y UX

Curso de Diseño de Interfaces y UX

Crea experiencias digitales que tus usuarios amen. Desde las etapas de investigación y el flujo de interacción, aprenderás con Sketch cómo diseñar una interfaz atractiva y funcional.

Cuando entendemos los componentes y funciones de la tipografía podemos transformar un texto en un mensaje.

No necesitas conocer la historia de la imprenta ni dedicar años a perfeccionar tu caligrafía para poder comunicar efectivamente. Veremos cómo optimizar la legibilidad y dar carácter a nuestros diseños. Empecemos con la pregunta fundamental:

¿Cuál es el propósito?

Estás diseñando la vista de una app que se usa mientras conduces, un juego para niños que están aprendiendo a leer, un título para un poster de película, una novela impresa, etc. Estos propósitos nos ayudan a definir el público, su contexto de uso, el tono y el estilo.

Para nuestro caso usaremos como ejemplo un pequeño artículo sobre Max Miedinger, el famoso diseñador de Helvética. Nuestro artículo estará en un blog de diseño y queremos que se sienta contemporáneo, fresco y convincente.

Nuestro artículo empezará viéndose así:

1990.doc

Un disclamer para Times New Roman: La culpa nunca es de la fuente tipográfica, es de el uso que hacemos de ella. La tipografías “clásicas” que hemos visto toda la vida como Arial, Verdana, Times, etc. son geniales, simplemente han sido mal usadas.


1. Elegir nuestra fuente

Antes de lanzarnos sobre Google Fonts o ir de shopping a Myfonts.com tengamos siempre presente: No necesitamos más de 2 fuentes y en la mayoría de casos con una es suficiente.

La legibilidad del contenido es nuestra prioridad, en especial cuando nuestro objetivo es la lectura continua. Una regla general es: Cuanto más le exigimos al usuario que lea, más simple y práctica debe ser la fuente. En cambio, cuanto menos texto ofrecemos, mayor expresividad podemos darle.

En nuestro ejemplo entregamos una cantidad importante de texto por eso necesitamos una fuente que facilite la lectura.

Serif vs. Sans

Tradicionalmente las fuentes con serifas son usadas para lectura pesada porque esas pequeñas terminaciones ayudan al ojo a conectar una letra con la siguiente y funciona mejor en impresos. Por eso la encontramos comunmente en libros y periódicos. Por otro lado, las fuentes sin serifas permiten un reconocimiento más rápido del texto y en términos generales funciona mejor en pantallas. Por eso reina en el mundo digital.

Un gran ejemplo de Serif y Sans es Medium. En sus títulos, extractos, cards, menús, etc. usan Sans pero en el cuerpo de los posts usa Serif. Lo importante aquí es saber que las tipografías y contenidos tienen muchos matices y no son una camisa de fuerza.

Otro factor importante al elegir una fuente es la cantidad de Pesos : Light, Regular, Bold, Black son algunos de los pesos que encontramos. Una fuente con suficientes pesos será mucho más versátil y nos facilitará el trabajo a la hora de jerarquizar. San francisco de Apple, Fira de Firefox y Roboto de Google son excelentes ejemplos de fuentes versátiles y optimizadas para pantallas.

Usaremos una Sans en nuestro ejemplo. Algunas fuentes gratuitas que cumplen con lo que buscamos son Lato, Open Sans, Roboto o Raleway.

Cualquiera funciona pero hay sutilezas que le dan carácter. Más o menos geométricas, más o menos compactas, mayor o menor diferencia entre Mayúsculas y minúsculas.

Imaginemos que cada una de estas fuentes tiene un equivalente en voz humana. ¿Cómo suena el texto en estas voces?
Es un ejercicio muy subjetivo pero nos dará una luz sobre la decisión final. Vámonos con Roboto.

Segunda fuente

La segunda fuente es la que usaremos en nuestros títulos, así que podemos elegir algo más expresivo. Justamente esa es la función de tener una segunda fuente: Acentuar el carácter.

Para encontrar fuentes que vayan bien juntas lo más importante es el contraste, que sean claramente diferentes. Si roboto es Sans podríamos arriesgarnos con una Serif, o una mucho más ancha. Hay varias técnicas para encontrar buenas parejas tipográficas y estas herramientas nos pueden ayudar: http://fontpair.co/ y http://typ.io/ El mismo Google fonts nos hace muy buenas sugerencias.

En estas pruebas es muy evidente la personalidad que adquiere cada unidad de Título + Párrafo:

Elegí Montserrat porque su carácter geométrico le da un buen contraste a Roboto y mantiene un tono fresco sin ser informal.

2. Tamaño

El tamaño de la fuente nos sirve para acentuar jerarquía y facilitar la lectura. En nuestro diseño tenemos:

1. Título
2. Subtítulos
3. Párrafos

Una jerarquía simple pero en diseños más complejos e interfaces puede crecer mucho, así que es importante mantener una estructura predecible de tamaños que le den un consistencia.

El punto de partida serán los párrafos, el contenido más común. 16px es el tamaño más recomendado en web. Desde ahí una escala de 8 en 8 permite suficiente diferenciación entre tamaños:

Esa será nuestra escala de tamaños principal pero si en algún caso particular necesitamos un tamaño adicional podemos agregar los intermedios (12, 20, 28, 36). La escala de 8 es la más popular pero aquí encuentras más ideas: http://www.modularscale.com/

Aplicando la escala a nuestro proyecto obtenemos:

3. Interlineado

Este es el espaciado más importante cuando diseñas con texto. Es la distancia que hay entre línea y línea de un párrafo. Ayuda al lector a pasar de una línea a la siguiente.

El interlineado debe estar Entre 120% y 160% del tamaño de la fuente. Usemos 140%, entonces: 16px x 1.4 = 22.4

4. Ancho de Línea

El ancho de línea es el tamaño del contenedor del texto y se mide en palabras por línea o caracteres por línea. Anchos muy grandes nos hacen perder la línea siguiente y anchos muy pequeños nos interrumpen demasiado la lectura. Entre 50 y 70 caracteres por línea es el ideal.

Este es un problema muy común en web y la solución está en hacer más pequeño el contenedor y/o hacer el texto de lectura un poco más grande. Medium lo solucionó haciendo un contenedor de 700px con un tamaño de fuente de 21px. Esto les da un promedio de 60.

Ajustemos nuestro contenedor:

5. Color

No olvidemos las recomendaciones del artículo de color para reafirmar las jerarquías y alejarnos del negro sobre blanco:

Voilà! ya tenemos un diseño digno de ser leído. De paso convertimos una parte del párrafo en un elemento que puede vivir solo 😉
La tipografía no es una ciencia exacta y hay muchos campos de profundización y experimentación. Sin embargo, con estos consejos ya tienes las herramientas fundamentales para comunicar con tipografía.

tipografia
Curso de Diseño de Interfaces y UX
Curso de Diseño de Interfaces y UX

Curso de Diseño de Interfaces y UX

Crea experiencias digitales que tus usuarios amen. Desde las etapas de investigación y el flujo de interacción, aprenderás con Sketch cómo diseñar una interfaz atractiva y funcional.
Carlos
Carlos
Escribe tu comentario
+ 2
Ordenar por:
10
33478Puntos

¡Hey vaca, excelente post!

Alguna vez me dijo una amiga deseñadora: “conocer sobre tipografías y su valor para el diseño, es lo que hace diferente a un aficionado de un diseñador profesional.”

Fue una gran lección.

8
33478Puntos
2 a

Te dejo este plus:

Para conocer el nombre de una fuente (o alguna muy similar) a partir de una imagen (png, jpg, gif), yo uso 👉
WhatTheFont … by Myfonts.com

Excelente herramienta online, muy recomendada.

5
193Puntos
2 a

Yo recomiendo también el font matcherator: www.fontspring.com/matcherator con el cual aveces obtengo unos mejores resultados que el de myfonts y es el que usa Font Squirrel en su web.

0
33478Puntos
2 a

@g3kdigital esa no la conocía … está excelente!

Ver todas las respuestas

5
48188Puntos

Excelente post Carlos! Me encantan cuando son sobre temas sencillos e importantes.

2
2871Puntos

Información super útil y excelente post. Gran aporte para los que iniciamos en este mundo del diseño.

2
193Puntos

Una aclaración: Debido a la resolución de monitores y displays modernos y que el problema del pixel fifting ya ha sido corregido en muchas fuentes serifadas (como la Lora) o muchas de las tipografías que uno encuentra en google fonts o my fonts.

Es decir, eso de que solo las serifas no se leen muy bien en monitores, es un mito que viene de la primera década de los 2000, es más muchas slab serif, se crearon específicamente para mejorar la lecturabilidad en pantallas.

Pero de resto, es un articulo muy bueno, para aquellos que se estan informando del hermoso mundo de las types.

1
8225Puntos
2 a

Tienes toda la razón. Las slab se veían como el camino medio pero ahora las densidades de pantalla más altas han permitido que las serifas vuelvan. 🙌

1
364Puntos

Buen árticulo 😃

1
3314Puntos

Muchas gracias por este post tan fantástico ❤️

1

Que bueno está este post!!! Super util, me encuentro preparando mi primer sitio web y me viene bárbaro, gracias!

1
497Puntos

Muy bueno este post. A medida que iba leyendo me emocionaba por leer más sobre el asunto.

1
19461Puntos

Leyendo este post de vaca, me doy cuenta de la importancia que le daba Steve Jobs a la tipografía y al diseño en sus productos.

1
8225Puntos
2 a

Si, esa historia de como conectó las clases de caligrafía con sus productos es inspiradora.

1
323Puntos

excelente Platzi

1
3169Puntos

Felicidades muy buen post, Las tipografias son un mundo

1
1534Puntos

Me encantó! Muy aclarativo!

1
12170Puntos

Me encantó! Exelente post!