Pasos y herramientas que te ayudarán a elegir las mejores tipografías para tu web

La tipografía influye en el diseño de tu web, casi el 90% de una web es tipografía por eso es un factor a tener en cuenta. El objetivo principal del texto en una web es que se lea y que consiga trasmitir el mensaje que se quiere dar a los lectores, es por ello que toma un papel muy importante. La gran parte del texto se utiliza simplemente para explicar e informar pero también se hace uso de ella como elemento visual para guiar al usuario. El tipo de letra que se utilice, el color, el tamaño, contraste, dará no sólo legibilidad a tus textos sino también un estilo diferente y una identidad propia.

Es importante también reestructurar bien el contenido, que sea ordenado y claro, los usuarios suelen hacer un recorrido rápido por la web por eso las páginas deben estar bien organizadas para una lectura casi siempre en diagonal.

A la hora de elegir una adecuada tipografía para tu web debes tener en cuenta algunos elementos básicos, ya que no es lo mismo leer en papel que en pantalla ya que la resolución de pantalla es mucho menor. Aquí algunas puntos que hará que tu contenido sea más legible, atractivo y eficaz:

1.Tamaño

Es evidente que el tamaño influye, y debemos tener en cuenta que no todos vemos igual de bien,  es muy importante que la lectura sea agradable. Por tanto al diseñar una web lo recomendado es utilizar un tamaño mínimo que suele ser entre 14px o 16 px dependiendo de la familia tipográfica y el soporte donde se vea.  

2.Combinación de diferentes tipografías

Sabemos que la importancia de una página web es el contenido por tanto el utilizar muchas tipografías en una misma página web puede ser negativo porque distraerá su lectura, aunque todo dependerá de la finalidad y de la creatividad que quieras dar a tu web. Pero lo recomendable es no utilizar más de tres tipografías.

3. Jerarquía

En una web es muy importante estructurar bien el contenido y utilizar una adecuada jerarquía para dar facilidades de navegación y poder encontrar lo que busca, diferenciando los titulares, subtítulos y demás elementos,  ya sea mediante colores, tamaños, estilos, etc.

4. Tipo de fuentes

Hoy en día gracias a que la mayoría de los navegadores web reconoce la regla @font-face podemos hacer uso de una gran variedad de tipografía, y conseguir dar personalidad a tu web y diferenciarte de las demás webs. Hacer uso de una fuente inadecuada puede también influir negativamente en tu web por eso elegir la tipografía adecuada es muy importante. Hay gran variedad de tipos de fuentes, las mejores que funcionan en una web son aquellas donde hay una mayor diferenciación entre caracteres. Las fuentes sin serifa (Sans serif), carecen de detalles por eso son más legibles en web y soportan mejor las baja resolución. Para los titulares y encabezados al tener mayor tamaño se podría utilizar las serifas (Serif), todo dependerá del estilo que se le quiera dar a tu página web. Utilizar tipografías sin serifa suele dar un estilo más moderno, alegre, limpio, técnico... en cambio si se utiliza con serifa da un carácter más cálido, más artístico, tradicional o personal. Pero muchas veces usar una u otra en los titulares suele ser cuestión de gusto o tendencia.

5. Interlineado

En cuanto al interlineado, se debe utilizar un interlineado que facilite la lectura, si se deja mucho espacio entre líneas dificultará la fluidez de la lectura, en cambio si ocurre lo contrario se vería un texto muy denso y de difícil lectura. Por eso lo recomendable para web es 1.5 veces mayor del tamaño del texto, esta proporción logra generar el espacio suficiente para la continuidad de la lectura.

6. Alineación

Las más utilizadas son la justificadas a la izquierda, son las más legibles aunque para texto corto se podría utilizar texto centrado. Las justificadas no se suele usar cuando éstas provocan demasiados espacios variables entre palabras ya que dificultan la lectura.

5. Contraste y colores

Hay que buscar el máximo contraste entre el color de la tipografía y el fondo, debe resaltar y destacar para así facilitar la lectura. Si no hay contraste no hay legibilidad. Los fondos oscuros no suelen ser recomendables sobre todo para texto largos porque fuerzan la vista, aunque estratégicamente se suele utilizar para destacar cierto contenido.


Conoce algunas herramientas que te ayudarán o inspirarán a elegir la tipografía y combinaciones para tu web:

WebFont -Test

Es una herramienta para probar y analizar WebFonts que tiene la intención de utilizar en sus sitios web o proyectos.Puede comparar fuentes de diferentes fuentes (Google Fonts, Fuentes del sistema o cualquier archivo de fuente descargado de Internet), analizar sus x altura, peso, características y peculiaridades, y mostrar su legibilidad en diferentes tamaños.

http://webfont-test.com/

 

FontPair

Herramienta que ayudan visualmente  a ver diferentes combinaciones tipográficas de Google Fonts.

http://fontpair.co/

 

Beautiful Web Type

Una muestra de las mejores tipografías de Google fonts, una muestra de diferentes creatividades y combinaciones.

http://hellohappy.org/beautiful-web-type/


 

Ainoa Tabares

Ainoa Tabares

Front-end Developer