4 consejos para el empleo de fuentes en diseño web

como elegir tipografia fuentes en web fonts-01

La difícil elección de las fuentes en web.

Las tipografías son algo más que letras: cómo interprete el lector el contenido de tu página va a depender de tus decisiones en la selección de las fuentes.

Por eso, no sólo su legibilidad es esencial, sino que también el color, el tipo de letra, el tamaño e incluso los espacios en blanco entre tu texto o alrededor de tu bloque de texto son otros de los elementos decisivos que harán que los usuarios o bien se queden leyendo el contenido de tu web o bien se decanten simplemente por ver de pasada las imágenes de tu site.

Al igual que en un proyecto editorial, en diseño web la tipografía elegida es fundamental, y no sólo por cuestiones estéticas. Hoy vamos a aprender algunas claves para mejorar el cómo mostramos las tipografías en web y no caer más en el error de elegir sólo la tipografía más bonita o, lo que puede ser peor, la más divertida e ilegible de todo Google Fonts.

1. Crea una jerarquía visual

como elegir tipografia fuentes en web fonts-02

Si estás familiarizado con el desarrollo web, conocerás ya los encabezados (h1, h2, h3..). Estas etiquetas no sólo nos ayudan a crear una jerarquía en el contenido a la hora de posicionarlo, sino que también nos ayudan a visualizarlo mejor, puesto que por defecto tienen tamaños de mayor a menor. Utiliza la jerarquía semántica del HTML para trabajar en la jerarquía de tus textos y empieza a darles estilo a cada uno para diferenciarlos.

La jerarquía visual se divide en cinco partes:

  • Tamaño y Grosor: El tamaño y el grosor del texto son los que harán que rápidamente identifiquemos el contenido como más importante. Es simple, cuanto mas bold o más grande sea el texto antes nos fijaremos en él.
  • Posición: La posición del texto es otro identificador visual en su escala jerárquica. Cuanto antes nos encontremos el texto, antes lo leeremos. Fácil, ¿verdad? Pues intenta recordar que el contenido más importante debe encontrarse al principio del barrido visual.
  • Tipografía: Un contraste entre las tipografías hará que se diferencien mejor entre sí y ayudará al lector a identificar los diferentes elementos del texto.
  • Color: Jugar con los tonos de color o con colores diferentes también hará destacar partes relevantes del texto o titulares.

2. Las Leyes de la Gestalt para tu composición

como elegir tipografia fuentes en web fonts-03

Las Leyes de la Gestalt son reglas que nos ayudan a organizar y componer correctamente. A la hora de crear bloques de textos y composiciones tipográficas puedes tener en cuenta algunas de ellas, como por ejemplo:

  • Ley de proximidad: Los humanos percibimos objetos cercanos como grupos y los relacionamos entre sí.
  • Ley de similitud: En la práctica se traduce como el empleo de la misma tipografía para elementos que tienen la misma importancia o la misma función. Un ejemplo serían los enlaces: si todos ellos tienen el mismo color, que a su vez es diferente del resto del texto, rápidamente los identificaremos dentro del cuerpo del texto con esa función de links.

3. La elección

como elegir tipografia fuentes en web fonts-04

Ahora sabes cómo componer, pero puede que tengas dudas de cuál elegir, ¡hay tantas tipografías para web! ¿Por dónde empezar? Aquí algunas ideas:

  • Empieza pensando en la fuente para el cuerpo de texto, te será mucho más fácil seleccionar las tipografías complementarias una vez que hayas elegido la que más va a aparecer en la web. Con WebType podrás probar tipografías a distintos tamaños y ver cómo quedan. ¡Ya puedes elegir!
  • Puedes utilizar herramientas como TypeTester para experimentar y buscar otras fuentes que te ayuden.
  • Busca inspiración: Las revistas son mi lugar favorito para encontrar ideas a la hora de crear diferentes composiciones de texto, pero puedes encontrar combinaciones de texto en casi cualquier parte. Por ejemplo, si te gusta la fuente que has visto en una web, ¡cópiala! Utiliza el inspector de elementos (o extensiones como el WhatFont) y búscala en Google Fonts.

4. ¿De dónde saco la fuente?

como elegir tipografia fuentes en web fonts-05

Existen tres formas de obtener tipografías para web. Vamos a conocerlas para que puedas empezar a componer:

  • Fuentes seguras: Son aquellas que están en todos o casi todos los ordenadores instaladas por defecto. Con estas tipografías te aseguras que la carga de la página sea mucho más rápida. Puedes saber cuales son las fuentes seguras aquí.
  • @font-face: Las font face son las tipografías que cargamos en nuestra web a través de nuestro propio servidor. No son una mala opción si queremos alguna tipografía muy muy concreta, puesto que nos permite instalar cualquier fuente que elijamos. Pero, por otro lado, tampoco se trata de la mejor opción, puesto que su principal ventaja es también un inconveniente: al estar cargadas en nuestro propio servidor, eso puede ralentizar la carga de la web.
  • Fuentes online: Puedes insertar tipografías de Google Fonts fácilmente; su carga es bastante rápida puesto que están en el servidor de Google… Y además, cuenta con un catálogo muy amplio y variado.

Piensa en la tipografía no sólo como elemento gráfico, sino también como componente comunicativo. Se tiene que adaptar a cualquier dispositivo y resolución, así que la elección de las fuentes para web puede complicarse cuando tengamos en cuenta factores como la legibilidad y la experiencia de usuario.

Espero que estos consejos te sirvan para la elección tipográfica en tu próximo proyecto web.

1 comentario en “4 consejos para el empleo de fuentes en diseño web”

Dinos lo que piensas

Tu email no se mostrará ;)