¿Qué tipo de fuente utilizar en tu web?

¿Aún no sabes qué tipografía utilizar en tu web? La tipografía o fuente es un elemento esencial que capta la atención del usuario en el primer vistazo. El texto, ya sean títulos, menús o el cuerpo es un factor clave tanto en el diseño de la web como en la experiencia del usuario, por eso vamos a ver la mejor manera de elegir la tipografía adecuada para tu web.

¿Cómo escoger la tipografía web o tipo de fuente adecuada?

Una tipografía para una página web no se elige simplemente porque sea bonita, fina o gruesa, hay que tener en cuenta una serie de factores que pueden afectar a tu página.

Velocidad de carga

La velocidad de carga de un sitio web es uno de los factores más decisivos para su posicionamiento y la fuente influye directamente en ella. Es recomendable utilizar fuentes ligeras que carguen rápidamente en el sitio web para que no perjudiquen a la velocidad de carga.

Y… ¿cómo te aseguras la velocidad de carga? Usando Fuentes de Google Fonts.

Google Fonts es un directorio gratuito de fuentes de Google que cuenta con más de 900 fuentes de diferentes tipos. Ya la mayoría de themes o plantillas de WordPress llevan cargadas por defecto las fuentes de Google, con lo que yo me evitaría cargar alguna externa que nos haga perder algún segundo de carga de velocidad y usaría alguna de este directorio. Tienes muchas donde elegir.

Compatibilidad con navegadores

Es muy importante que la fuente se muestre de manera adecuada en los diferentes navegadores con los que puedan acceder los usuarios al sitio web. Hay que tenerlo muy en cuenta a la hora de escoger la fuente, ya que de lo contrario la información del sitio web podría quedar inaccesible a ciertos usuarios. Una vez más con las fuentes de Google Fonts te evitas este problema.

Facilidad de lectura

Hay que tener en cuenta la legibilidad de una fuente antes de escogerla. En ocasiones, las fuentes que parecen más bonitas a primera vista pueden cansar al lector e incluso molestarlo, lo que hará que tenga una mala experiencia de usuario y probablemente abandone el sitio web.

Yo he visto en muchas páginas de clientes que usáis tipos de fuente como la de las imágenes:

Este tipo de fuente aunque es muy personal, bonitas, diferentes… cansan mucho a la vista del lector, incluso en algunas ocasiones no se lee bien lo que pone… tener cuidado con eso.

¿Qué fuentes elegir?

Después de lo que os he comentado sobre que tipo de fuente NO usar. Ahora os cuento que tipo de fuente SI usar…

Normalmente se suele utilizar o un tipo de fuente para toda la página web. O una para los encabezados, menús etc y otra para los párrafos. Para los encabezados suele ser una un poco más personal o moderna (estilo Serif) y para los párrafos otra más sencilla (estilo Sans Serif).

En ambos casos cuanto más sencilla sea la letra mejor y se tienen que evitar los tipos de letra HandWriting, que son este tipo de fuente como si estuvieran hechas a mano.

También es importante que el tipo de letra tenga diferentes estilos o variaciones de peso, es decir, que tenga diferentes grosores para luego poderlos usar en la página web, al menos que tenga 5 o 6. Esto puedes verlo en la propia página de Google Fonts… te muestro donde…

También tienes la funcionalidad de poder poner el texto que quieras y que te muestre la tipografía con una frase que tú decidas.

Por último comentarte que tienes diferentes páginas donde te ayudan a combinar unas fuentes con otras para poder usar en tus encabezados y en tus párrafos. Por ejemplo en esta:

Combinar Fuentes de Google Fonts

Elementos de la tipografía web a tener en cuenta

Una vez tienes tu fuente elegida otros puntos a tener en cuenta son estos:

Tamaño de la fuente

Es importante escoger el tamaño de fuente adecuado para cada lugar. Utilizar un tamaño de fuente muy grande en los párrafos puede perjudicar al flujo de información e incluso hacer molesta la lectura al usuario, mientras que un tamaño muy pequeño para los títulos puede hacer que pasen desapercibidos y pierdan su función orientativa. Para orientarte podría decirte que en párrafos se suele usar 16px o 18px, menos sería ya muy pequeña y más demasiado grande. En los encabezados depende mucho de la fuente que hayas elegido y de la web que vayas a hacer.

Colores

Los colores de una fuente web deben resaltar en contraste con el fondo de la página en la que se encuentran. Se pueden utilizar colores para destacar textos o ideas, pero hay que evitar usar los que más pueden molestar a la vista. También es recomendable evitar utilizar demasiados colores, ya que esto puede desorientar a los usuarios. Lo más habitual para el cuerpo del texto es utilizar negro o un tono de gris.

Interlineado

El interlineado es la separación entre líneas dentro de los párrafos o entre títulos y es un aspecto fundamental a la hora de escoger o configurar una fuente. Un interlineado muy grande dejará demasiados espacios en blanco entre el contenido, lo que puede aburrir al lector y perjudicar en formato mobile porque tendrá que hacer mucho scroll.

Si por el contrario, el interlineado es muy estrecho, pueden acabar las líneas del texto muy juntas e incluso ser ilegibles en las pantallas pequeñas.

Como puedes ver, a la hora de elegir tipografías para tu página web debes tener muchas cosas en cuenta. Como te he explicado en este artículo un diseñador web siempre va a elegir fuentes de Google Fonts para sus clientes ya que son más rápidas de carga y compatibles con todos los navegadores… Pero ten en cuenta que lo importante también es que se lea bien, no que sea más bonita o más fea.

Aquí tienes otro artículo sobre que necesitas para empezar tu página web