Cómo escoger las tipografías para tu página web

Hoy vengo con otro de esos contenidos fundamentales y súper importantes para que tu web luzca atractiva y, lo más importante, te ayude a cumplir tus objetivos: la elección de las tipografías.

Desde hace varios meses hasta hoy he ido publicando en este humilde blog los pilares más importantes a la hora de diseñar una página web.

Hace varias semanas te hablé de cómo preparar las páginas principales de tu web. Estos son los posts:

• Cómo diseñar una página de inicio efectiva en tu web
• Cómo hacer la página ‘Sobre mí’ de tu página web
• Cómo hacer una página de servicios efectiva en tu web
• Cómo hacer la página de contacto de tu web

Y hace solo unos días publiqué un post sobre cómo escoger los colores para tu página web.

Así como los colores son cruciales a la hora de transmitir el espíritu de tu negocio, las tipografías son un pilar esencial, pues tus visitantes tendrán que poder leer tus contenidos convenientemente.

Las tipografías son muy apetitosas y dan mucho juego, ¿verdad? ¿Me equivoco si alguna vez has estado buscando tipografías, has terminado seleccionando 50 opciones diferentes y terminaste turuleto?

Normal, porque hay tantas opciones que te puedes volver majara perdido.

También están los que utilizan la Montserrat para todo…

Yo tengo estado horas buscando una tipografía.

Y dirás tú: «¡pedazo matao!»

Pero no te equivoques, encontrar la tipografía más adecuada para nuestro negocio merece que le dediques el tiempo que haga falta. Es una decisión importantísima.

Así que vamos a ver cómo deberías tratar este tema para ir sobre seguro.

Venga, empezamos…

Antes de empezar a buscar tipografías, haz esto…

Cuando se te pase por la cabeza buscar las tipografías para tu página web, no vayas corriendo a Google a buscar «Descargar tipografías gratis». ¡Para el carro!

Antes de meterte en faena en el diseño web, primero que deberías hacer es tratar de resolver estas cuestiones y tenerlas bien claras:

Imagen de marca

Para que tu tipografía encaje bien en tu web es alinearla con tu imagen de marca.

¿Qué tipografías te vienen a la cabeza cuando piensas en las siguientes marcas?

• Coca Cola.
• Gucci.
• Toys R’Us.
• Rolls Royce.

Seguro que dependiendo de cada marca has imaginado tipos de fuentes totalmente opuestas… Unas más clásicas, otras más rompedoras, alguna fina y elegante…

Pues de eso se trata, de que las tipografías se asocien y casen bien con tu marca y tu negocio.

Cliente y público ideal

Al igual que el uso de colores es algo muy importante en tu web para conectar con el perfil de visitante que aterrizará en ella, también lo son las tipografías, pues deberían estar alineadas con tu tipo de negocio, tu cliente ideal y el público que consumirá tus contenidos.

Tipo de contenidos de la web

Alineado con el punto anterior, tienes que tener claro qué tipo de contenido leerán tus visitantes en tu web en general y en tu blog.

¿El tipo de contenidos que tratarás en tu web es moderno o tirando a serio? ¿Qué tipo de contenidos mostrarás? ¿Textos enfocados a empresas? ¿Un periódico? ¿Cuentos infantiles? ¿Textos de una gestoría?

Por estas razones debes examinar y estudiar muy bien el tipo de tipografía que encajará más con los textos de tu web.

Tipos de tipografías existentes

En este apartado voy a desglosarte los diferentes tipos de tipografías existentes según su estilo:

Serif (o Serifa)

Este tipo de tipografías son las más tradicionales y se caracterizan por tener los extremos de sus caracteres rematados con elementos decorativos.

Algunos de los ejemplos más conocidos de fuentes serifa son la Times New Roman, la Garamond o la Georgia.

Las fuentes serifa se asocian a tranquilidad, formalidad y elegancia.

Sans Serif (o sin Serifa)

También conocidas como fuentes «de palo seco», son tipografías más modernas y, al contrario que las serifa, los finales de sus caracteres son planos y no terminan con ningún elemento de decoración.

Ejemplos de este tipo de fuentes clásicas sin serifa son la Arial, la Futura o la Verdana.

Representan modernidad, claridad y limpieza.

Slab Serif

Estas tipografías son menos abundantes pero están cogiendo peso en el diseño web si se utilizan bien. Son como las serifa pero con un remate más cuadrado.

Un ejemplo sería la Roboto Slab, que se utiliza bastante actualmente combinada con su homóloga sin serifa, la Roboto.

Display

Aunque su uso es menos recomendable para diseño web, existe un tipo de tipografía muy utilizada en diseño gráfico de cartelería o rotulación: las fuentes Display.

Estas fuentes son muy anchas y de gran impacto visual.

No es bueno abusar de ellas y su uso puede estar bien únicamente para elementos muy llamativos que deban destacar en un momento concreto, como puede ser un mensaje muy impactante en el hero de la página de inicio.

También hay otros tipos de letra que no son tan comunes, pero que también debes barajar como posibilidad para según qué ocasiones:

Script o Handwriting

En este grupo de tipografías entrarían todas las que simulan la escritura a mano, por lo que su uso se recomienda únicamente para casos muy concretos, como pueden ser citas o slogans. Cuidado con ellas, porque suelen dificultar la lectura.

Formatos de tipografías

Existen diferentes formatos de tipografías que puedes utilizar en tu web, pero CUIDADO, porque no todas son reconocidas por todos los navegadores.

Estas son las más comunes:

TrueType (.ttf)

Son las más estandarizadas y utilizadas en cualquier navegador y dispositivos Windows y Apple. Creado por Microsoft y Apple hace ya unos cuantos añitos.

OpenType (.otf)

Formato evolución del TTF, creado por Adobe y Microsoft. Las fuentes OTF contienen los datos de pantalla y fuentes de impresora en un solo componente. Muy comunes también en diseño web.

WOFF (.woof)

Formato de fuente web abierto, utilizado por los navegadores modernos. Es el formato OTF o TTF pero con metadatos y compresión para una carga más rápida. Fue creado por Mozilla, Microsoft y Opera para ser usada en la web.

WOFF2 (.woff2)

Formato de fuente abierto utilizado por navegadores súper modernos. Es similar al formato WOFF 1.0, pero presenta una compresión mejorada. Los archivos WOFF2 permiten a los diseñadores web usar tipografías personalizadas en vez de las fuentes web estándar.

SVG

Formato para dispositivos iOS, las fuentes SVG se ven como glifos o símbolos, pues se comportan como si fueran un archivo vectorial.

El principal inconveniente del formato SVG es que no permite su selección por palabras; sólo se puede seleccionar por filas o párrafos completos, por lo que no es recomendable para textos largos.

¡Me gustan las tipografías de esta web! ¿Cómo sé cuáles son?

En el proceso de creación de nuestra marca y nuestra web, es recomendable buscar inspiración en Internet e incluso echar un ojo a las webs de nuestra competencia para ver cómo lo están haciendo ellos.

Si llega un momento en el que encuentras en una web una tipografía que te excita, querrás saber cuál es.

Bien pues para hacerlo voy a darte 3 opciones:

Inspector de Google Chrome

Cuando estés en la web cuya tipografía te interese sigue estos pasos:

1. Pulsa el botón F12 de tu teclado. Se te abrirá una persiana en el navegador (abajo o a un lado).
2. Haz clic en el iconito de la flechita y ponte encima del texto cuya tipografía quieres conocer.
3. Se desplegará una cajita flotante (tooltip) y en ella verás la información.

Extensión ‘Fonts Ninja’ para Google Chrome

Utiliza la extensión Fonts Ninja (gratuito) para Google Chrome. Con solo activar la extensión, te aparecerá una ventana flotante con la información de las tipografías y además podrás ponerte sobre los textos para identificarlas.

Extensión ‘WhatFont’ para Google Chrome

Otra opción buena pero más simple es la extensión para Chrome WhatFont. Cuando estés en una web, te colocas sobre un texto y WhatFont te indicará mediante un tooltip de qué tipografía se trata. Simple.

Qué tamaño de tipografía debo utilizar

Otro de los aspectos que generan más dudas a la hora de utilizar tipografías son sus tamaños.

Aunque tú vas a poder utilizar los tamaños que quieras, existen unos tamaños «base» para cada tipo de texto, desde los textos de párrafo hasta los diferentes encabezados H1, H2…

Estos son los tamaños que yo te recomiendo utilizar como baremo para cada uno de ellos:

• H1: de 36 a 42 píxels.
• H2: de 30 a 36 píxels.
• H3: de 24 a 30 píxels.
• H4: de 20 a 24 píxels.
• Cuerpo: de 16 a 18 píxels.

Evidentemente si para el H1 utilizas por ejemplo 36px, no pongas el H2 a 34px, pues la diferencia será ínfima. Juega con esos intervalos pero que haya diferencia suficiente entre ellos.

Ahora, dependiendo también de las tipografías que utilices, debes tener en cuenta que no todos los tamaños se ven con la misma proporción. Habrá textos de párrafo que a 16px se verán bien y otros tendrás que subirlos a 18px para poder leerlos bien. Y con los encabezados, pues más de lo mismo.

Qué colores debo usar en las tipografías

El uso de colores en las tipografías debes tomártelo con calma.

Lo ideal es intentar no pasarnos de innovadores con este tema y tratar de utilizar colores lo más cómodos posible para la vista y la lectura.

Por eso te recomiendo que utilices colores cercanos al negro, como los colores hexadecimales #333 o #444, que contrastan bien sobre fondo blanco pero no son un negro puro.

En caso de que tengas algún color «no-negro» en tu paleta de colores que pueda casar bien para los encabezados, prueba a utilizarlo, pero si son colores fuertes o que no tengan buen contraste, olvídalo.

Dónde encontrar tipografías para tu página web

Existen una buena ristra de webs en Internet para buscar tipografías y aquí te voy a enseñar cuatro de las más conocidas.

Google Fonts

Sin duda la mejor herramienta para seleccionar las tipografías para nuestra web es Google Fonts.

Como siempre, Google metiendo las narices en todo…

En Google Fonts podrás encontrar cientos de tipografías para aburrirte.

Lo mejor de todo es que las tipografías de Google Fonts están ya integradas con cualquier tema profesional para WordPress y con los maquetadores más conocidos, como Elementor. De esta forma, una vez que en Google Fonts hayas seleccionado la tipografía que te mola, podrás ir a tu tema o a tu maquetador y simplemente seleccionarla de la lista.

Ventajas:

• Están estandarizadas.
• No tienes que subirlas a tu web.
• Son gratuitas.
• Casi todos los temas y maquetadores las traen integradas.

Adobe Fonts

Esta herramienta de la bien conocida Adobe (Photoshop, Illustrator…) te permitirá utilizar un sinfín de tipografías de su repositorio con solo añadir un pequeño fragmento de código CSS en tu web.

Dafont

Una de las características que destacan de Dafont son sus tipografías de gran creatividad. Estas fuentes suelen ser de tipo display, por lo que debes andar con ojo para utilizarlas correctamente en tu web.

Hasta donde yo sé, son todas gratuitas, pudiendo hacer una donación al autor.

Fontsquirrell

En Fontsquirrel podrás encontrar tipografías tanto gratuitas como de pago para descargarlas y subirlas a tu web.

Una de las opciones interesantes de las que dispone es un identificador de tipografías. Subes una imagen de un texto y la herramienta intentará «adivinar» de qué tipografía es y te dará alguna opción que se acerque a la original.

Herramientas útiles para el uso de tipografías

Google Font Previewer for Chrome

Es una extensión de Google Chrome que te permite simular las tipografías en tu propia web en tiempo real. Muy interesante para probar si una tipografía encaja en tu diseño.

Use Any Font

Si en vez de utilizar tipografías de Google Fonts o Adobe Typekit, las cuales no es necesario subir a la web, necesitas subir una tipografía desde tu disco duro, puedes utilizar el plugin Use Any Font para ello.

Cómo combinar las tipografías en mi página web

Lo más recomendable con respecto al uso de tipografías en tu web es utilizar únicamente dos: una para encabezados y otra para párrafos.

Las tres opciones más comunes son:

1. Una tipografía para encabezados y otra para párrafos.
2. La misma tipografía tanto para encabezados como para párrafos.
3. Una tipografía para encabezados y la misma tipografía, pero con variante para los párrafos.

El primer y segundo punto son fácilmente entendibles, pero ¿y el tercero?

Un ejemplo muy claro con el que ilustrar este método es la tipografía Roboto -que ya te puse como ejemplo más arriba-, la cual tiene una versión Sans Serif y otra Slab Serif, la Roboto Slab. En esencia es la misma tipografía, pero con «acabados» diferentes.

 

CONSEJO DE ORO SOBRE COMBINACIÓN DE TIPOGRAFÍAS:

Para que las tipografías casen bien entre ellas, una receta que casi nunca falla es utilizar por ejemplo  una Serif para los encabezados y una Sans Serif para los párrafos. Y a la inversa también funcionan bien; una Sans Serif para encabezados y una Serif para párrafos.

Ahora te dejo unas recomendaciones para cada tipo de texto de tu web:

Párrafos <p>

• Escoge una tipografía Serif o Sans Serif (nunca Display o Script) que priorice la legibilidad.
• Que tenga un tamaño lo suficientemente grande para leerse bien. Arriba te lo he explicado.
• Asegúrate de que las letras sean homogéneas en lo que a grosor se refiere. Hay tipografías que son más finas en el interior y más gruesas en los remates y esto dificulta la lectura en textos pequeños.
• Escoge un estilo ni muy fino ni muy grueso.
• Asegúrate de que tenga opción de negrita y cursiva. Aunque parezca una coña, existen fuentes que no disponen de esas opciones.

Títulos <H1>, <H2>, <H3>, <H4>…

• Para encabezados puedes utilizar casi cualquier tipografía, si bien se recomienda que sea algo más gordita que la de párrafo.
• Haz que los tamaños de cada encabezado H1, H2… se diferencien bien entre ellos para que se entienda bien la jerarquía de contenidos.

Textos «secundarios»

• Define correctamente la tipografía y estilo de los textos de botones, formularios, menús, etc.
• Que no sea una tipografía diferente a las de párrafo y encabezados, pero sí puedes jugar con el tamaño y variantes para que se diferencien y lean bien.

Las 20 tipografías más utilizadas para ir a tiro fijo

Como ya te vengo comentando desde varios párrafos atrás, deberías basar las decisiones sobre tus tipografías en dos estilos principales: Serif y Sans Serif.

Ahora te voy a enseñar cuáles son quizá las 10 tipografías de cada uno de estos dos estilos más utilizadas y recomendadas para diseño web.

Serif

1. Baskerville
2. Cormorant Garamond
3. Lora
4. Martel
5. Merriweather
6. Noto Serif
7. PT Serif
8. Playfair Display
9. Roboto Slab
10. Source Serif 4

Sans Serif

1. Lato
2. Montserrat
3. Noto Sans
4. Open Sans
5. Oswald
6. Poppins
7. PT Sans
8. QuickSand
9. Raleway
10. Roboto

Ejemplos de webs con buen uso de tipografías

Para ir finalizando este post, voy a enseñarte algunas plantillas de páginas web en la que utilizan una buena combinación de tipografías:

Farm

• Encabezados: DM Serif Display
• Párrafos: Red Hat Display

Influencer

• Encabezados: Montserrat (Extra Bold)
• Párrafos: Montserrat (Regular)

Care

• Encabezados: Domine
• Párrafos: DM Sans

Spa 6

• Encabezados: Playfair Display
• Párrafos: Poppins

Firebrigade

• Encabezados: Barlow Condensed (Medium)
• Párrafos: Barlow

12 consejos para un buen uso de las tipografías en tu web

Y ahora sí, ya llegamos al final con una serie de consejos a modo de resumen de todo el tochaco que te acabo de soltar:

1. Utiliza únicamente 2 tipografías: una para encabezados y otra para párrafos.
2. No escojas tipografías demasiado rebuscadas.
3. Que tengan varios estilos para poder «jugar» con ellas. Mínimo 4 estilos diferentes.
4. Si vas a escribir en español, la tipografía escogida debe tener acentos y caracteres especiales del idioma, como la ñ.
5. Utiliza el color y el tamaño adecuadamente.
6. El interlineado de los textos de párrafo que sea generoso; si las líneas van muy pegadas, dificulta la lectura.
7. Rompe la lectura de textos largos con saltos de línea, estilos, encabezados, imágenes…
8. Los párrafos muy largos insértalos en cajas de entre 700 y 800px de ancho. Si son más anchos, provocan dificultad de lectura.
9. No justifiques los textos: generan espacios intermedios demasiado amplios y no homogéneos. Además, los textos sin justificar, facilitan el salto de línea al lector.
10. Evita el uso de textos de párrafo blancos sobre fondos oscuros o de color.
11. No abuses de las mayúsculas en los párrafos. Dan sensación de «estar gritando».
12. Analiza el rendimiento de tu web a causa de las tipografías; no todas pesan lo mismo o afectan igual y pueden penalizar el WPO.

Libro recomendado sobre el uso de la tipografía para diseño web

Si quieres seguir profundizando en el mundillo de las tipografías y te manejas con el inglés, este libro de Matej Latin lo explica todo mejor que yo:

Conclusión

Como cierre, decirte que no te emociones mucho con las tipografías y vayas sobre seguro. Vale más que peques de conservador que de innovador.

El mundillo de las tipografías da para mucho y te puedes volver turuleto, pero con las pautas que te he dado, tendrás todo en tu mano. Guarda este post en tus favoritos y tira de él siempre que necesites ayuda para enfocar el tiro.

 

Hasta aquí, compañerxs… Ahora te toca a ti compartir este incunable entre tus fans, seguidors y followers (folladores en spanish) y que vengan todos a flipar con este post.

Me voy, me marcho, que ya es tarde.

¡Hasta luego, Lucarrrrr!