Quizás nunca te has parado a pensar en la importancia que tiene la tipografía dentro de una página web. Elegir las fuentes adecuadas para nuestro sitio es algo que no debemos tomarnos a la ligera. Utilizar tipos de letras que no van con nuestra filosofía de negocio o realizar malas combinaciones puede perjudicar seriamente la usabilidad de nuestra página web.
Tipografía web: claves para acertar
Qué debemos tener en cuenta a la hora de elegir una tipografía para nuestra página web:
La legibilidad. Que todos los textos de nuestra web sean claramente legibles en todos los dispositivos debe ser nuestra prioridad número uno. Aunque la tipografía influye en la estética de nuestra web, su función no es la de decorar sino la de hacer legibles y comprensibles los textos para el usuario. Cuanto más fácil resulte la lectura, mejor.
El tamaño: para favorecer la legibilidad es importante que haya diferentes tamaños de letra, diferenciándose fácilmente los títulos, los subtítulos, los párrafos, etc.
Contraste: para evitar párrafos y párrafos de texto interminable (y aburrido para el usuario) es necesario utilizar recursos que faciliten la lectura al usuario: uso de títulos y subtítulos, negritas para señalar lo importante, párrafos destacados, etc.
Algunos consejos:
No justificar textos: en libros, revistas u otro tipo de documentos lo normal es que los párrafos vayan justificados, pero en el caso de una página web lo más recomendable es que no lo estén. Hacerlo puede generar espacios poco estéticos y perjudicar la legibilidad.
No usar párrafos demasiado largos: en las versiones de escritorio debemos procurar que los textos queden centrados, sin ocupar toda la pantalla. Si obligamos a nuestros usuarios a tener que leer nuestros contenidos como si estuvieran viendo un partido de tenis no les hará mucha gracia.
Dejar espacio entre líneas: para facilitar la lectura debemos dejar un espacio prudencial entre las líneas de nuestros textos. Los ojos de nuestros usuarios nos lo agradecerán.
Utilizar negritas: otra forma de favorecer la legibilidad es utilizar negritas en nuestros textos. Además, con este método también conseguiremos destacar aquellas palabras o frases que más nos interesen de cara al posicionamiento de nuestra web.
No abusar de las mayúsculas: utilizar mayúsculas en algún título que nos interese mucho destacar no es mala idea, pero es un recurso del que no debemos abusar. Cuando alguien escribe con mayúsculas interpretamos que está gritando, y no queremos que nuestros usuarios piensen que les estamos voceando.
Combinar tipografías: para evitar la monotonía en tu página web y dotarla de un toque diferente lo ideal es que combines diferentes tipografías, pero lo recomendable es que no uses más de dos. Usar demasiadas puede saturar al usuario.
Tipos de fuentes
Existen cientos de tipografías diferentes. La elección de las más indicadas para nuestra web dependerá de nuestra filosofía de empresa, a qué público nos dirigimos, qué queremos transmitir.
Los principales tipos o familias de fuentes son estas cuatro:
Para el diseño web en general las fuentes más recomendables son las serif, mucho más limpias y legibles en pantalla. Un buen recurso es la combinación de fuentes serif en encabezados y sans serif en cuerpos de texto (o viceversa). Las fuentes decorativas y manuscritas deberías utilizarlas solo en casos muy excepcionales.
Cuáles son las fuentes más populares y cómo combinarlas
Algunas de las páginas donde podemos descargar fuentes gratuitas para nuestra página web son Dafont, Font Squirrell y, cómo no, Google Fonts.
Actualmente Google Fonts cuenta con más de 900 tipografías diferentes, todo un catálogo donde elegir. A continuación, te muestro algunas de las fuentes más populares y con qué otras combinan a la perfección:
Open Sans
Fuente sans-serif humanista diseñada con formas abiertas y una apariencia neutral pero amigable. Optimizada para impresión, web y móvil. Una de las fuentes con mejor legibilidad.
Merriweather
Fuente serif diseñada especialmente para pantallas, con gran altura, formas condensadas, una leve tensión diagonal y formas abiertas.
Montserrat
Fuente sans-serif inspirada en los letreros y marquesinas del histórico barrio argentino de mismo nombre. Es una de las tipografías más utilizadas en diseño web.
Lato
Fuente sans-serif que significa “verano” en polaco, origen del diseñador de esta tipografía. De proporciones clásicas, con detalles semi redondeados, es un tipo de letra elegante, seria y estable.
Roboto
Fuente sans-serif con formas en parte geométricas, con curvas abiertas y amigables. El ancho de sus letras permite un ritmo de lectura natural.
Karla
Fuente sans-serif de carácter algo grotesco, perfecta si quieres darle un toque minimalista y diferente a tu página web.
Nunito
Fuente sans-serif con un buen equilibrio, diseñada inicialmente para pantallas, aunque posteriormente se adaptó para poder utilizarse en todo tipo de soportes.
Lora
Fuente serif contemporánea bien equilibrada y moderna, con un contraste moderado y optimizada para visualizarse en pantallas.
Source Sans Pro
Fuente sans-serif de Adobe destinada a funcionar bien en las interfaces de usuario.
Alegreya
Fuente serif seleccionada como una de las 53 fuentes de la década en 2011. Tipografía contemporánea inicialmente diseñada para utilizarse en libros, aunque su frescura y dinamismo también la convierten en una buena elección para web, sobre todo en titulares.
Raleway
Fuente sans-serif elegante, inicialmente creada para grandes encabezados y otros usos de gran tamaño, aunque su gran legibilidad la hace perfecta para web.
Work Sans
Fuente sans-serif optimizada para textos de tamaño mediano en pantallas, aunque también se utiliza en soportes impresos.
IBM Plex Sans
Fuente sans-serif diseñada para capturar el espíritu y la historia de IBM y para ilustrar la relación entre la humanidad y las máquinas. Tipografía neutral y amigable con una excelente legibilidad en web y móviles.
Si te ha gustado el post, puedes dejarme un comentario, regalarme 5 estrellitas o compartirlo en tus redes sociales, que es gratis 😉
