Claves para acertar con la tipografía de tu página web

Lydia Calero

Diseñadora Web Freelance

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.

tipografia web legibilidad

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.

tipografia web contraste

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:

tipografia web tipos de fuentes

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.

tipografia web open sans

tipografia web open sans combinaciones

Merriweather

Fuente serif diseñada especialmente para pantallas, con gran altura, formas condensadas, una leve tensión diagonal y formas abiertas.

tipografia web merriweather

tipografia web merriweather combinaciones

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. Una de mis favoritas y protagonista de los textos de esta página que ahora mismo estás leyendo.

tipografia web fuente montserrat

tipografia web fuente montserrat combinaciones

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.

tipografia web fuente lato

tipografia web fuente lato combinaciones

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.

tipografia web fuente roboto

tipografia web fuente roboto combinaciones

Karla

Fuente sans-serif de carácter algo grotesco, perfecta si quieres darle un toque minimalista y diferente a tu página web.

tipografia web fuente karla

tipografia web fuente karla combinaciones

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.

tipografia web fuente nunito

tipografia web fuente nunito combinaciones

Lora

Fuente serif contemporánea bien equilibrada y moderna, con un contraste moderado y optimizada para visualizarse en pantallas.

tipografia web fuente lora

tipografia web fuente lora combinaciones

Source Sans Pro

Fuente sans-serif de Adobe destinada a funcionar bien en las interfaces de usuario.

tipografia web fuente source sans pro

tipografia web fuente source sans pro combinaciones

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.

tipografia web fuente alegreya

tipografia web fuente alegreya combinaciones

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. 

tipografia web fuente raleway

tipografia web fuente raleway combinaciones

Work Sans

Fuente sans-serif optimizada para textos de tamaño mediano en pantallas, aunque también se utiliza en soportes impresos.

tipografia web fuente work sans

tipografia web fuente work sans combinaciones

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.

tipografia web fuente ibm plex sans

tipografia web fuente ibm plex sans combinaciones

Y hasta aquí el repaso a las claves para acertar con la tipografía de tu web. ¿Qué te ha parecido el artículo? ¿Usas alguna de estas fuentes en tu página? ¿Te gustaría probar con alguna diferente? No lo dudes y aprovecha todas las ventajas que la elección de una buena tipografía puede ofrecer a tu sitio web.

Y si te ha gustado el post, anímate a compartirlo en tus Redes Sociales. ¡Compartir es vivir!

Soy Lydia Calero y ayudo a pymes y emprendedores autónomos a conseguir una página web atractiva y eficaz para su negocio. Estoy especializada en el diseño de páginas web con WordPress y Divi, tema Premium de Elegant Themes, la combinación perfecta para crear sitios web espectaculares. Pídeme presupuesto sin compromiso para diseñar tu página web con WordPress y Divi. Te lo enviaré en menos de 24/48 horas, totalmente a la medida y adaptado a tus necesidades específicas.

¿Te ha resultado útil este artículo?

Average rating / 5. Vote count:

¡Aún no hay votos! Sé el primero en valorar este artículo

¡Siento mucho que el post no te haya resultado útil!

¡Ayúdame a mejorarlo!

¿Cuáles son tus sugerencias para mejorar este post?

8 trucos infalibles para triunfar con tu página web

Descubre las claves para conseguir una página web que te ayude a atraer nuevos clientes, multiplicar tus resultados y destacar sobre tu competencia.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

uno × 3 =

Información básica sobre protección de datos Ver más

  • Responsable Lidia Calero Jimenez .
  • Finalidad Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios LUCUSHOST.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

También podría gustarte…

Share This