TIPOGRAFIA WEB

Tipografía en Web

4 de diciembre de 2019
Maiela ZurutuzaUX/UI Design

Descubre cómo elegir la tipografía que mejor se adecue a tu web.

“El tipo bien usado es invisible como tipo, así como la perfecta voz modulada es el inadvertido vehículo utilizado para la transmisión de las palabras… de las ideas.”

Beatrice Warde The Cristal Goblet - Londres, 1932

Elige un tipo de letra

Generalmente, los diseñadores dedicamos mucho tiempo a elegir un tipo de letra para cada proyecto. Existen muchísimas tipografías y esto a veces hace que no sepamos cuál escoger. En estos casos, lo primero que debemos definir es el tono de nuestro proyecto, y de ahí decidir si funciona mejor un tipo de letra u otro. ‍

A grandes rasgos, podemos clasificarlas en dos grupos:

Tipografías con serifa, que generalmente darán al proyecto un tono más clásico, y las tipografías sin serifa, que le darán un aspecto más moderno. ‍

A no ser que tu proyecto requiera un tipo de letra muy específico, te recomiendo usar las web fonts, unas tipografías estandarizadas con las que ahorrarás tiempo a la hora de elegir y harán la web más accesible. Google por ejemplo, tiene un amplio catálogo con fuentes de calidad que puedes descargarte gratuitamente.

‍ Ante todo, evita utilizar tipografías de carácter decorativo, ya que esto sólo hará que el usuario se distraiga.

tipografia-web.jpeg

Crea jerarquías tipográficas

Para ayudar al usuario a entender el mensaje y guiarse por la pantalla, debemos organizar la gran masa de texto y crear franjas diferentes para cada apartado. Para conseguir esto, debemos evitar usar más de dos tipografías en un mismo mensaje y diferenciar los apartados generando contrastes mediante tamaño, peso o color. Para llevar esto a cabo, es recomendable generar un sistema coordinado a través de una guía de estilos. Así ayudaremos al usuario a entender el mensaje de una manera mucho más clara y unificada.

tipografia-web-eunoia.png

Cuida la legibilidad

Este es un tema muy importante y hay que tener varios aspectos en cuenta. ‍

Por un lado, tenemos que cuidar la longitud de línea. Si hacemos líneas de texto muy largas, es posible que el usuario tenga dificultades para seguir las líneas y se salte varias durante la lectura. Por el contrario, si son muy cortas, le estaremos forzando a cambiar el foco de su mirada constantemente. Para ello debemos tener en cuenta la pantalla en la que aparecerá, ya que no será lo mismo la de un ordenador que la de un móvil.

La longitud de línea ideal suele oscilar entre 45 y 75 caracteres por línea, incluyendo espacios. En dispositivos móviles sin embargo, entre 30 y 40 caracteres suele ser lo ideal. Además de la longitud de línea, es igual de importante el tamaño de letra y su interlineado.Para una lectura fluida, no debemos hacer líneas muy juntas ni muy separadas, ya que entorpecerían al usuario. Un interlineado óptimo es de 1,4 y 1,6 veces el tamaño de la tipografía. Para titulares en cambio, podemos reducirlo a 1,2. ‍

Otro aspecto esencial es el contraste entre la letra y el fondo. Muchos usuarios pueden tener problemas de vista o incluso si están en la calle, la luz del día hace que no apreciemos las pantallas de la misma manera.

Existen diversas páginas que analizan el contraste entre colores y te pueden ayudar a hacer una web mucho más accesible. Una de ellas es:

https://webaim.org/resources/contrastchecker/

tipografia-web-2.jpg

Testea tu web

Aunque en web, la cantidad de formatos es inmensa; por eso es conveniente ver nuestro proyecto en diferentes dispositivos y así ver cómo funciona la tipografía en cada pantalla.

Esto nos permitirá ver detalles y hacer cambios que no habíamos contemplado mientras trabajabamos con los programas de diseño.

tipografia-web-eunoia-digital.jpg

OTROS ARTÍCULOS DEL BLOG

Otros artículos

Las cookies son importantes para ti, influyen en tu experiencia de navegación, nos ayudan a proteger tu privacidad y permiten realizar las peticiones que nos solicites a través de la web. Utilizamos cookies propias y de terceros para analizar nuestros servicios y mostrarte publicidad relacionada con tus preferencias en base a un perfil elaborado con tus hábitos de navegación. Puedes 'Aceptar' o 'Rechazar' aquellas cookies que no sean técnicas. Más información, consulta nuestra Política de Cookies. aquí.