Uso de la tipografía en diseño web

Picture of Ricardo Trigueros
Ricardo Trigueros
Diseñador gráfico especializado en Diseño Web.
Tabla de contenidos
Categorías del blog
tipografiaendisenoweb

Cuando hablamos de diseño web, una de las partes más importantes es la elección de las tipografías más adecuadas para cada proyecto. En general, los clientes suelen estar abiertos a sugerencias y asesoramiento, pero en ocasiones llegan completamente decididos a usar esta o aquella tipografía y a este o aquel tamaño. Y la mayor parte de las veces se equivocan.

Aquí hemos querido dejar unos consejos básicos sobre el uso de la tipografía en diseño web, que a algunos les parecerán muy obvios, pero os puedo asegurar que a otros les servirá de mucha ayuda.

1º. Jerarquía tipográfica

Lo primero que uno tiene que hacer cuando se enfrenta a la elección de las tipografías para una página web es establecer claramente la jerarquía, ya sea mediante color, tamaño, negritas, etc. Básicamente hacemos esto, porque si tenemos una buena jerarquía, el usuario navegará con mucha más facilidad a lo largo de nuestra web.

Jerarquía tipográfica

2º. No hacer el texto demasiado pequeño.

Siempre creemos que todo el mundo actúa, siente y ve como nosotros al llevar a cabo el diseño de una web y no es así. Hay que saber que ni todos tenemos el mismo gusto ni todos vemos igual de bien. Por eso debemos establecer siempre un tamaño mínimo para la tipografía para que la gente pueda leer los contenidos sin dejarse la vista. Un tamaño de 14 puntos puede ser bastante aceptable.

Tamaño Tipográfico

3º. Escoge una tipografía adecuada para el cuerpo de los artículos o secciones.

A veces uno quiere ser «muy creativo» y hacer uso de tipografías que a priori son muy originales o aportan un punto diferenciador sobre el resto, pero hay que tener una cosa en cuenta, y es que los contenidos de una web han de ser legibles. No puedes usar una tipografía barroca ni con muchos adornos para una información que estará dispuesta en varios párrafos porque eso creará un impacto negativo entre los usuarios.

Tipografía Adecuada

4º. No usar demasiadas tipografías en la misma página

Esto es básico. Uno no puede usar diez tipografías en una misma página porque distraen muchísimo, y si queremos que la importancia de la web resida en los contenidos es contraproducente. Esto no quiere decir que haya quién consiga una web fantástica con multitud de tipografías, pero es algo realmente complicado de conseguir sin marear al personal.  Lo recomendable es ceñirse a no más de tres tipografías por página.

Usar pocas tipografías

5º. Interlineado correcto

Otro de los puntos importantes cuando aplicamos tipografía es dejar un interlineado que facilite la lectura de los contenidos. Esto es vital, ya que si dejamos poco espacio entre líneas provocaremos una sensación de mucha densidad de texto y además haremos más complicada la lectura a los usuarios. Obviamente tampoco conviene pasarse.

Interlineado correcto

6º. No usar demasiado las letras capitales o mayúsculas.

Los usuarios por regla general no están habituados a leer textos donde todas las palabras estén en mayúsculas. Por eso hay que tener cuidado con este punto, ya que si ponemos textos muy largos que estén completamente en mayúsculas complicaremos la lectura a los usuarios de la web.

No usar mayúsculas en exceso

7º. No excederse en el uso de los textos centrados

Para empezar no es nada cómodo para el usuario leer textos centrados por la sencilla razón de que cada línea suele empezar a una altura diferente y eso hacer más complicado seguir el hilo de lo que se lee. Por no hablar de que es mucho más complicado jugar con el resto de objetos de la web. Por último, cuando uno se encuentra una web donde la mayoría de textos está centrado, la sensación es de que poca profesionalidad.  Usa los textos centrados de una forma moderada y acertarás.

No usar textos centrados

8º. Usa un contraste adecuado

Esto es otra de esas reglas básicas. El contraste es vital para que un texto sea legible, así que escoge bien los colores y los tonos para que sea fácil poder leer los contenidos de la web y que no se fundan.

Buen contraste

Y eso es todo. Básicamente son 8 reglas que si aplicas te salvarán de cometer errores de principiante a la hora de diseñar cualquier tipo de proyecto web.

Recibe los artículos en tu cuenta de correo
Picture of Ricardo Trigueros
Ricardo Trigueros
Diseñador gráfico especializado en Diseño Web.

9 comentarios en “Uso de la tipografía en diseño web”

  1. Maximiliano

    Buen resumen. Ojo que el punto 1 de Jerarquía está invertido el ejemplo bueno del malo 😉
    detalles que se pasan.
    Saludos

    1. ricarlos

      Cierto, un error humano, pero lo dejaremos así para que haya constancia de lo que indicas en tu comentario. Un saludo.

  2. Seto

    No está bien que quieras dejar la imagen 1 como constancia del comentario. Al primer vistazo de ese error ya dejé de leer el artículo, fue a la segunda mediante google que leo los comentarios y me fijo que dejaste como constancia del comentario de Maximiliano.

    Deberías cambiarla, y con eso cualquier error que el usuario detecta, ya que para eso están los comentarios, no al revés, los errores (ortográficos, imágenes, otros) no están para sustentar los comentarios.

    1. Ricardo Trigueros

      Pues como verás, te hecho caso y ya he cambiado la imagen. Llevas bastante razón de que no da muy buena imagen tener un fallo en el primer punto y agradezco muchísimo que hayas escrito y razonado tu opinión.

      Un saludo y gracias por el comentario

  3. Carlos

    Este artículo se va a convertir en mis tablas de David de la tipografía en Web 🙂

    1. Ricardo Trigueros

      Buenos días Carlos,
      me alegro de que el artículo te haya sido útil. Muchas gracias por tu comentario.

      Un saludo

  4. neiva otero

    sencillo pero muy aclarador! 🙂

    1. Ricardo Trigueros

      ¡Eso creo yo!
      Muchas gracias por tu comentario!

  5. Ascension

    Perfectamente explicado y ejemplarizante.?

Deja un comentario

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

  He leído y acepto la política de privacidad

Artículos relacionados
¡Escríbenos!