Tipografías web

Desde siempre la tipografía ha sido relevante para transmitir emociones en el mundo del marketing, pero la tipografía web, aún tiene más fuerza.

Los expertos dicen que el contenido es el rey de una web, por ello la tipografía es un pilar fundamental a la hora de diseñar, ya que puede hacer que el contenido sea legible o no, y por lo tanto, útil o no para el usuario.

Para elegir un tipo de tipografía tenemos que saber primero que es lo que queremos transmitir, ya que cada una provoca una emoción diferente. Steve Jobs habló de la importancia de la tipografía en un discurso que da en la Universidad de Stanford. Os dejo el vídeo para quien lo quiera ver.

Las mejores tipografías web

Hay dos grandes grupos tipográficos: Serif y Sans Serif. Serif son las letras que normalmente se utilizan en libros y periódicos de papel y presentan detalles en los contornos de la fuente, lo cual provoca una lectura rápida evitando la monotonía. En esta tipografía destaca Garamond y Times New Romans. Sans Serif (“sin Serifa”) ,es una tipografía más sencilla, con trazos uniformes y vértices rectos que da la sensación de limpieza y son perfectas para la web. Algunos ejemplos son Helvética o Arial.

En la web se pueden incluir dos tipos de letras diferentes, una para los párrafos y otras para los títulos. Mi recomendación es que no incluyas más de dos tipos y que combinen entre ellas. Lo más importante de una tipografía es que sea legible y clara. Esto excluye letras cursivas como la Comic Sans que tan de moda estuvo, pero que para web es muy poco útil.

Es complicado elegir una tipografía para la web, yo recomiendo aquellas que estén diseñadas para verse en pantalla y no en papel. Google Web Fonts ofrece más de 600 tipos de tipografía, todas ellas gratuitas.

Mis recomendaciones de las mejores tipografías web son:

-Open Sans. Es considerada como la reina de las tipografías web por su alta calidad tanto en títulos como en párrafos y lo bien que se ve en pantallas móviles. Muchas plantillas la utilizan como default. Descarga Open Sans.

-Roboto: Es una fuente Sans Serif parecida a Helvética pero más ancha y redondeada. Es la tipografía predeterminada de Android. Descarga Roboto.

-Montserrat . Es similar a Gotham pero gratuita. Es muy buena sobretodo para los titulares. Tiene inspiración en barrios argentinos porque su diseñadora es de ahí. Descargar Montserrat .

-Helvética. Esta tipografía es de pago, sin embargo la mayoría de los cms la suelen incorporar. Es la que utilizo para mi blog. Descargar Helvética Si no aparece, te puedes descargar algunas similares que ofrece Google Fonts como Lato Descargar Lato

Siempre puedes cambiar el tipo de letra en la web accediendo al código CSS con la propiedad de Font-family.

Además Google ha desarrollado una extensión para Chrome WhatFont, que reconoce que tipografía usa la web en la que estás pasando el ratón sobre ella.

Legibilidad en los textos

El tamaño si que importa. El tamaño mínimo que aconsejo para una tipografía es de 16 px de alto, pero si ponéis más mejor, así os aseguráis de acceder a todas las personas, desde jóvenes a mayores.

Cuidado con poner el mismo tamaño para dos fuentes diferentes, ya que para una 14 px igual está bien, pero para otra fuente puede resultar muy pequeña, y le quitarías importancia al texto. Esto es por el valor que le asignas al tamaño (en px), no es un tamaño real, solo una referencia del espacio vertical que podría ocupar.

Para diferenciar las importancias del texto, se utiliza la etiqueta H. H1 se suele utilizar para los títulos y cobra más valor que, por ejemplo un H3.

El tamaño se configura con la propiedad Font-size.

El ancho de la línea es otra variable que tenemos que tener en cuenta para la legibilidad. John Kane, experto en tipografía escribió un Manual de tipografía en el que argumenta que el ancho de línea óptimo está entre 35 y 65 caracteres, esto es entre 7 y 12 palabras por línea dependiendo de la longitud de estas.

El espacio entre caracteres también es muy importante. Éste varía en función del tipo de tipografía. Para no cambiar el espaciado que tiene la fuente por defecto es mejor alienar el texto a la izquierda y no justificarlo, ya que si lo justificas, el espacio entre caracteres y palabras varía para adaptarse a ocupar toda la línea.

El justificado puede resultar muy legible si logras quitar los llamados “ríos” (huecos entre palabras)y aseguras un espaciado uniforme entre caracteres, sin embargo, yo siempre aconsejo alineación a la izquierda.

Cuando hablamos de espacio entre caracteres debemos distinguir entre kerning y tracking. El primero se aplica entre dos caracteres dentro de una palabra, mientras que el segundo amplía o reduce todos los espacios entre caracteres de un bloque (ya sea un texto o una palabra). Tanto el kerning como el tracking se pueden configurar con Adobe Indesing. Es cierto que este programa no está diseñado para webs sino para contenido editorial, sin embargo, si lo podemos utilizar para hacernos una idea de cómo quedaría el texto y luego exportarlo a html.

Es muy probable que nos dejemos algún espacio entre palabras, a mí me ha pasado varías veces. Para evitarlo se puede activar el botón mostrar marcas de párrafos y otros símbolos de Word.

No solo es importante el tamaño, sino también el interlineado, es decir, la distancia entre línea y línea o ancho de línea. Si dejas poco espacio da la sensación de aglutinamiento y se complica la legibilidad. Esta característica se configura con la propiedad line-height. Lo ideal es que ronde el 120% del tamaño del texto.

Últimos tips

-Si quieres diferenciar un contenido frente a otro, puedes variar el tamaño de la letra o distinguirlo con cajas de colores para que el usuario vea que es lo más importante.

-Sigue el principio de estandarización: no cambies lo que el usuario ya sabe. Por ejemplo las palabras que lleven a un link, ponlas subrayadas o de otro color.

-Utiliza palabras en negrita para resaltarlas dentro del texto. Google lo tomará como importante y sus arañas (robots) lo indexarán mejor.

Aplicar bien la tipografía web para que el rey siga siendo el contenido.