Tipografía para páginas web: ¿Cómo escoger la correcta?

Si planeas crear un sitio en Internet o te encuentras en el proceso, este post sobre tipografía para páginas web es lo que estabas buscando. Aquí te ofrezco toda la orientación que necesitas para acertar en la elección del tipo de letra adecuado, su color, tamaño y más.

Tipografía para páginas web

La importancia de escoger correctamente la tipografía para páginas web

Aunque pueda parecer trivial y meramente estético, la verdad es que la tipografía tiene una importancia enorme en lo que se refiere al diseño web; y es que, el tipo de letra que escojas para presentar tus contenidos incluso puede influir en el estado emocional del lector.

Como lo lees, de hecho es posible que tú mismo lo hayas experimentado sin darte cuenta. Te pongo un ejemplo, lee las próximas frases y considera qué impresión te ha dejado cada una de ellas:

Tipografía para páginas web

Lo más probable es que en el primer caso sintieras que leías un diario personal o una historia relatada de manera muy cercana por parte del autor, mientras que el segundo parece un encabezado del periódico, ¿estás de acuerdo?

Esta es sólo una forma de mostrarte la importancia de escoger correctamente la tipografía para páginas web, porque a través de ella puedes transmitir tu intención a los usuarios, de modo que debes procurar usar la adecuada.

Pero esa no es la única razón, cuando se trata de escoger el tipo de letra debes priorizar la legibilidad de la misma, con el fin de que los lectores puedan apreciar tus contenidos con facilidad y no se cansen demasiado pronto para que consigan llegar hasta el final del post. Observa el siguiente ejemplo:

Tipografía para páginas web

Aunque en ambos casos conseguimos transmitir la sensación de estar leyendo un diario personal y tienen exactamente el mismo tamaño de letra, estoy seguro que no has acabado de leer el segundo ejemplo porque la tipografía dificulta demasiado la apreciación de las palabras, a eso me refiero con elegir sabiamente.

Criterios a tomar en cuenta para elegir la tipografía ideal

No nos engañemos, hoy en día existen infinitos tipos de letras disponibles en la web y, aunque apreciemos la variedad, eso dificulta aún más la labor de escoger un tipo de letra adecuado para nuestro sitio.

Por eso, te ofrezco a continuación los criterios que debes tomar en cuenta para elegir acertadamente.

¿Qué imagen quieres proyectar?

De forma similar al primer ejemplo que viste antes, de acuerdo con el propósito de tu sitio web imaginarás diferentes estilos de letras y eso te dará una idea más clara del tipo que puedes utilizar.

Posiblemente a causa de la publicidad a la que hemos estado expuestos durante toda la vida, inconscientemente estamos en la capacidad de asociar tipos de letras a marcas. Piensa, por ejemplo, en Coca Cola, Gucci, Disney o Mercedes Benz, seguramente has imaginado estilos diferentes para cada uno de ellos.

El objetivo es que la tipografía se asocie con la marca de tu negocio o el propósito de tu web, de modo que los usuarios se identifiquen con ella al leer los contenidos.

¿A qué público te diriges?

Cuando escojas la tipografía para tu sitio web deberás tener en mente a los usuarios que leerán tus contenidos e intentar ponerte en su lugar para determinar si realmente proyecta lo que tú deseas.

Por ejemplo, si tu web ofrece contenido para niños, lo ideal es que la letra sea fácil de leer y a primera vista luzca amigable para que se sientan motivados a leerla.

¿Qué tipo de contenido ofreces?

En estrecha relación con el criterio anterior, deberás tomar en cuenta el tipo de contenido que estarás ofreciendo al público para escoger la letra adecuada.

Por ejemplo, un portal de noticias o salud debe transmitir seriedad, por lo cual será necesaria una tipografía básica y de cierta manera "formal" para que encaje con el propósito de la web.

Tipos de letras para sitios web

Ya ha quedado claro que dependiendo del tipo de sitio web, puede que sea más recomendable utilizar una tipografía u otra, por lo que es algo a lo que se debe prestar atención.

Normalmente recomiendo tener 2 tipografías, una para los encabezados y otra para el contenido. Por ejemplo, a mis clientes de "Tu web en 14 días" les presento 3 opciones para encabezados y 3 para el contenido, así ellos eligen las que más les gusten.

A continuación, te ofrezco algunas alternativas que puedes escoger para tu sitio web según el estilo que desees darle.

Serif

Es una tipografía bastante tradicional y luce atractiva porque los extremos de las letras están elegantemente redondeadas. En este mismo estilo puedes encontrar Times New Roman, Garamond y Georgia.

Sugiere tranquilidad, objetividad y elegancia, por lo cual resulta versátil y apropiado para páginas informativas, educativas o científicas.

Sans Serif

A diferencia del estilo anterior, en esta tipografía los trazos acaban de forma recta, proyectando modernidad, limpieza y seriedad.

Arial, Futura y Verdana son tipos de letras acordes con este mismo estilo. Resultan apropiadas para sitios web de medicina, periódicos digitales, portales deportivos, entre otros.

Slab Serif

Este estilo puede considerarse intermedio entre los dos anteriores, no es tan tajante como el Sans ni tan decorado como el Serif.

Ejemplo de ello es la tipografía Roboto Slab o simplemente Roboto. Proyecta un estilo bastante casual que puede encajar perfectamente en sitios web con fines comerciales.

Display

Esta es la tipografía recomendada para diseño gráfico en carteles y rotulaciones, aunque no es tan conveniente para sitios web.

Las letras son anchas y generan impacto visual, por lo que deben utilizarse con discreción y únicamente para destacar elementos puntuales del texto.

Script o Handwriting

Este es el estilo que usé en el primer ejemplo del post, simula la escritura hecha a mano, por lo cual es ideal para textos que puedan proyectarse como relatos personales, citas o slogans.

Al utilizarla debes procurar que haya suficiente espacio en las letras y tenga el tamaño adecuado para que no se vea afectada su legibilidad. Sin embargo, no la recomiendo para todo el sitio web, sólo extractos de texto en específico.

Formatos de tipografías para páginas web

Los tipos de letras se encuentran disponibles en diversos formatos, pero no todos son reconocidos por los navegadores en Internet.

  • TrueType (.ttf): Es un tipo de letra estándar que puede ser reconocido por cualquier navegador, el preferido de Microsfot y Apple.
  • OpenType (.otf): Surgió como la evolución del anterior, es compatible con Adobe y Microsoft, puede usarse en diseño web.
  • WOFF (.woof): Es el formato utilizado por los navegadores modernos porque permite una carga más rápida.
  • WOFF2 (.woff2): Es un formato similar al anterior, pero cuya compresión es mucho mejor, por lo cual es el preferido de los diseñadores web.
  • SVG: Este formato está destinado a dispositivos iOS, no admite la selección de palabras, sólo líneas o párrafos enteros, por lo cual no es conveniente para textos largos.

Herramientas para identificar la tipografía que te guste de otros sitios web

Si necesitas inspiración para escoger la tipografía adecuada, te recomiendo visitar otros sitios web de la competencia y si consigues alguna que te guste, estas son las herramientas que puedes usar para identificarla.

Inspector de Google Chrome

Estando en la web que tiene la tipografía de tu agrado, realiza lo siguiente:

  • Pulsa F2 en el teclado y aparecerá una ventana en la parte inferior de la pantalla.
  • Haz clic en el icono de la flecha, ubicado en la esquina superior izquierda de la ventana y a continuación posiciona el cursor sobre cualquier palabra escrita con la tipografía que deseas identificar.
  • A continuación, aparecerá un recuadro emergente con datos entre los cuales hallarás "Font", precisamente el nombre de la tipografía.

Extensión "Fonts Ninja" de Chrome

Esta extensión de Google Chrome es gratis, sólo debes ubicarla en el menú de extensiones e instalarla.

Cuando se encuentre activa, con sólo posicionar el cursor sobre el texto aparecerá el recuadro con la identificación del tipo de letra.

Extensión "WhatFont" de Chrome

Otra extensión gratis y muy sencilla de utilizar. Funciona exactamente igual que la anterior cuando la has activado en tu navegador, pero sólo identifica el tipo de letra, sin ningún otro dato adicional.

¿Qué tamaño de letra utilizar en tu web?

En este aspecto tienes mayor libertad al momento de escoger, pero puede ser de utilidad que utilices la siguiente guía que recomiendo a mis clientes para jerarquizar la importancia de sus contenidos.

El objetivo es que los tamaños más grandes se le atribuyan a las partes importantes del texto y vayan disminuyendo en relación con su nivel de relevancia de manera evidente para la vista, así:

  • H1: Títulos y encabezados (36 a 42px)
  • H2: Subtítulos (30 a 36px)
  • H3: Desgloses o derivados (24 a 30px)
  • H4: Desgloses secundarios (20 a 24px)
  • Párrafo: Texto (16 a 18px)

¿Qué color de tipografía utilizar en tu web?

Aunque el objetivo sea destacar con originalidad, el refrán "menos es más" aplica muy bien para este caso.

Mi recomendación es que la mayor parte del texto (especialmente el cuerpo de las publicaciones) se muestre en color negro o cercano al mismo (#333 o #444) y utilices tonalidades más llamativas para la cabecera, los títulos u otras secciones de la web.

Eso sí, deberás dar prioridad a la comodidad visual y legibilidad antes que a cualquier otra cosa. Si necesitas ayuda con esto, sólo tienes que decirme y me encargaré de darle a tu web la apariencia adecuada.

Sobre mí

Sobre mí

¡Hola! Me llamo Jose AMD, vivo en Sevilla y soy Desarrollador Web. Estoy aquí para ayudarte a crear y mejorar tu página web, para que así puedas convertir tus grandes ideas en realidad. ¡Infórmate!

Déjame un mensaje

Me gustaría saber más sobre ti, tus proyectos y cómo crees que puedo ayudarte con tu página web. Puedes contactar conmigo enviándome un email a info@joseamd.es o rellenando el siguiente formulario, como prefieras 😉

  • Este campo es un campo de validación y debe quedar sin cambios.

Scroll al inicio