La importancia de las tipografías en el diseño web

Para todos los expertos en diseño y en el mundo web esto será algo evidente, pero son muchos los errores que se cometen a la hora de utilizar las tipografías dentro del sitio web. Normalmente cuando hablamos de una web, suele estar hecha con un CMS o gestor de contenido, y es precisamente esto, el contenido, lo verdaderamente importante dentro de la web. Por esto hoy te traemos la importancia de las tipografías dentro del diseño web, pues son estas las que determinan una gran parte del diseño y las encargadas de exponer el contenido que queremos introducir dentro de la web.

Las tipografías en el diseño web

Empezamos definiendo lo que es la tipografía web, por si alguien no conoce el significado de este término. Dentro de la tipografía web englobamos el tipo de letra, tamaño, color, espaciado, peso y disposición de la misma con la que decidimos exponer nuestro contenido dentro de la web.

La elección de una tipografía no es una cosa sencilla ya que hay que tener en cuenta numerosas características que nos ayudarán a la hora de comunicar nuestro contenido, o por el contrario provocarán rechazo en el lector.

Las características de la tipografía

Cosas que hay que tener en cuenta para hacer un buen uso de las tipografías en el diseño web.

La serifa o el serif

Esto se refiere a las tipografías que tienen un remate en los extremos de los caracteres, que suele ser puntiagudo en la mayoría de las ocasiones y dota de una personalidad diferenciada a la fuente utilizada. Algunas tipografías con serifa son Times New Roman o Rockwell por ejemplo.

Es cierto que en general, para grandes textos suele ser más fácil la lectura de tipografías con serifa, pero estéticamente puede parecer más desordenado y en un primer vistazo es posible que cause rechazo cuando se utiliza demasiado.

Las tipografías con serifa dentro de la web están indicadas para títulos o subtítulos donde haya un breve texto que deba resaltar, aunque ahora se está volviendo a utilizar cada vez más estos tipos de fuentes.

El peso y el tamaño

El tamaño de la letra que estemos utilizando para nuestro sitio web va a tener mucha importancia dentro de la composición de la página. Todo el contenido que esté pensado para ser leído debe tener un tamaño uniforme, legible, visible y sin excederse. Tan malo es poner letra muy grande como muy pequeña, pues ambas opciones mal utilizadas pueden acabar causando rechazo en el lector.

Por otro lado, está el peso de la fuente, es decir el grosor de los caracteres, el trazo. Este grosor debe ser adecuado para el tamaño de fuente que estemos utilizando, está bien el uso de negritas para resaltar ciertas partes de los textos, pero hay que tener en cuenta que la negrita tiene una peor legibilidad y a pesar de que resalte a mira vista, no hay que abusar de ella.

El espaciado y el interlineado

Más o menos pasa lo mismo que con el tamaño. El espaciado que viene por defecto entre las letras de una fuente suele ser el necesario para una buena lectura, aunque puede haber excepciones. Lo mejor es no tocar el espaciado de las letras a no ser que sea claramente necesario para mejorar la legibilidad.

Y también hay que tener en cuenta el interlineado, por norma general un interlineado de un 140 – 150% suele bastar para tener una buena legibilidad. Va a depender siempre del tamaño y peso de la fuente y la disposición de la misma, habrá ocasiones que pidan un interlineado más reducido o más ampliado.

El color

Este punto puede que sea el que parece menos importante, pero es esencial para lograr una armonía compositiva y tener una buena legibilidad del contenido. Normalmente el color de la letra suele ser bastante más oscuro que el fondo y lo ideal es que el fondo sea liso y plano, para que el texto resalte.

Una curiosidad sobre la tipografía web y su color, es que no suele usarse casi nunca negro sobre blanco, ya que resalta demasiado. Esto se solventa jugando con grises muy oscuros o muy claros para lograr una percepción de blanco y negro más suave.

El uso de las tipografías en el diseño web

Con todas las características de las que ya hemos hablado, tendrás una concepción de lo que es la tipografía web en tu cabeza. Pues bien, para evitar cometer errores y no olvidar lo importante que es la elección de una buena fuente, te dejamos unos consejos con los que podrás hacer una buena elección de tipografías en tu sitio web

Usa un máximo de 2 fuentes diferentes

Suele ser un error muy común el hecho de querer “meter más diseño” usando diferentes tipografías, lo que solamente logra confundir al lector. Normalmente la opción indicada es usar dos fuentes, una para títulos y otra para textos. Y jugar con las diferentes versiones de esas fuentes, pudiendo intercalar negritas o cursivas para resaltar partes del contenido.

Jerarquiza los textos

Es muy importante que el lector entienda la jerarquía de los textos, teniendo como referente el tamaño y peso de la fuente utilizada. No va a ser del mismo tamaño un título, que un subtítulo, que un elemento de una lista o un bloque de texto.

Una buena jerarquización ayuda a comprender mejor el contenido y a realizar una estructura mental de lo que se está leyendo. También es importante jerarquizar para posicionar nuestros textos indicando las etiquetas html adecuadas para que los buscadores sepan la importancia de cada elemento. (Hablamos de los H1, H2, H3…)

Texto sobre imagen, con mucho contraste

Cuando ponemos de fondo una imagen es muy importante que el texto tenga contraste con respecto a la misma. Se pueden utilizar imágenes de fondo, pero un buen recurso para restar importancia a la imagen y dárselo al texto es reducir la opacidad de la misma, oscureciendo o aclarando el fondo y dándole el efecto contrario a la fuente que estemos usando.

Uso de mayúsculas

A raíz del uso de las redes sociales es muy común interpretar las mayúsculas con un ton enfadado o una llamada de atención. Hay algunos sitios de la web donde se pueden utilizar mayúsculas para llamar la atención como puede ser la navegación o el texto interior de un botón, pero si las utilizamos en los bloques de texto solo conseguiremos confundir al lector y provocar rechazo.

Fuentes estándar y monospace

Si tienes dudas sobre el uso de la tipografía, no te la juegues y utiliza fuentes seguras. Estas fuentes son las que suelen aparecer por defecto en los editores de texto, tienen una buena legibilidad y combinan bien entre ellas. Aunque no destaquen ni llamen demasiado la atención son una apuesta segura para una fuente legible.

Otra opción que se puede utilizar son las tipografías llamadas monospace, creadas para web y pensadas para que el espacio que ocupe cada letra sea el mismo. Independientemente de las letras que sean, un ejemplo de esta tipografía muy utilizada es Roboto. En este tipo de fuentes ocupa el mismo espacio horizontal una i que una m, esto no significa que tengan más o menos peso, si no que la separación entre una letra y otra va a ser la misma independientemente de la letra que sea. Es una buena forma de asegurar una armonía visual en los bloques de texto.

Presta atención a lo que escribes

Si eres como nosotros, perfeccionista hasta la médula y de los que les gusta siempre rizar el rizo, hay que prestar mucha atención a los textos para que queden armoniosos y ordenados dentro del sitio web.

En The Butterfly Webs nos encanta armonizar toda la percepción de la web y por ello prestamos especial atención al uso de las tipografías y la longitud de los textos, intentando que los elementos similares tengan extensiones de texto similares. De esta forma el visitante disfrutará de la experiencia dentro de la web sabiendo jerarquizar el contenido desde el primer momento sin apenas percatarse.

Por último y no por ello menos importante, queremos recordar que la tipografía siempre forma parte activa del diseño, por lo que es un elemento más que da forma al contenido que queremos expresar.