La tipografía de un Sitio Web, al igual que otros factores como los colores o las imágenes, es esencial para lograr atraer visitantes y que estos se terminen por convertir en clientes.

En este post te voy a explicar las claves para que elijas las fuentes Web más adecuadas para tu proyecto

Conceptos básicos que es necesario manejar

Podríamos enumerar más aspectos relacionados con las Fuentes Web pero vamos a centrarnos en los 3 más importantes.

Legibilidad

Te puede parecer que es un poco absurdo que te diga esto pero es que, por experiencia propia, en ocasiones nos ofuscamos con querer que nuestras páginas sean chulas y atractivas a los ojos de los demás pero nos olvidamos de lo más importante: Los textos deben ser perfectamente legibles, si no vamos por mal camino.

Una de las claves principales para la Creación de Contenidos Web está en que los visitantes puedan leer, sin dejarse los ojos, los textos publicados. Así que ya sabes siempre la legibilidad por delante del “Diseño molón”.

Comparación fuente legible y no legible

Primeramente la fuente ilegible, luego una elección de fuente correcta.

Dimensión de las Fuentes

Aquí, para determinar el tamaño adecuado para nuestras tipografías para Web, deberemos tener en cuenta si las estamos utilizando en un encabezado (existen varios tipos de encabezado, lo veremos en detalle en futuros post) o en un párrafo normal.

Un tamaño Standard podría ser el siguiente:

✅ h1: Entre 30 y 50 px

✅ h2: Entre 20 y 30 px

✅ h3 y h4: 18 – 20 px

✅ p (etiqueta para párrafos normales, no encabezados): Entre 12 y 16 px

Hay que precisar que, en función de la tipografía escogida, dos fuentes distintas con el mismo tamaño de encabezado pueden perfectamente tener dimensiones diferentes.

Contraste

Al confeccionar un documento es muy importante diseñarlo de tal manera que quien lo vaya leer pueda distinguir los distintos apartados que lo componen (de ahí la importancia de los encabezados) de manera que no resulte aburrida y compleja su lectura.

Además los términos que consideremos más importantes es recomendable destacarlos poniéndolos en negrita o subrayándolos lo que hará que se distingan claramente dentro del escrito.

También es conveniente, para hacer la lectura más amena, insertar algún elemento multimedia (imágenes o vídeos generalmente) a lo largo del documento.

Todos estos trucos forman parte de lo que denominamos contraste en la redacción de un documento.

Tipología de fuentes Web

Aunque existen multitud de tipografías disponibles todas ellas se agrupan en 3 familias:

Serif

Tipografía tipo Serif

Tipografía tipo Serif

Se usan habitualmente en libros, periódicos, revistas… En definitiva para fuentes impresas. Wikipedia define las fuentes serif como “Las gracias, serifas (del francés serif), remates, patines o terminales son adornos ubicados generalmente en los extremos de las líneas de los caracteres”.

Ejemplos de fuentes serif pueden ser la archiconocida Times New Roman o Century.

Sans Serif

Fuente sans serif

Ejemplo de Fuente sans serif

Son fuentes sin adornos en los extremos. Son las más usadas en los Diseños Web.

Ejemplos de fuentes Sans Serif pueden ser las famosas Arial o Helvética entre otras muchas

Script

Fuente Script

Modelo de tipografía Script, imitación escritura siglos pasados.

Son fuentes que tienden a imitar la forma de escribir del siglo XVII.

Se pueden utilizar para los títulos pues si se emplea en textos normales puede complicar bastante su lectura.

Dónde buscar fuentes que se adecuen a tu proyecto y como escoger las mejores

Hay diversas Webs que te permiten escoger tipografías pero sin duda lo más recomendable es acudir a Google Fonts. Te enumero sus ventajas porque es la elección más recomendada:

Interface Google Fonts

Imagen donde se explica como son las tipografías de Google Fonts.

✅ Es la Web que más variedad de tipografías ofrece. Más de 900 fuentes en donde escoger la que más de adapte a tus necesidades.
✅ Son gratuitas, libres de licencias.
✅ Tienes dos opciones de uso: Las cargas directamente desde el servidor de Google o las descargas a tu equipo y, a continuación, las instalas en tu CMS.
✅ Te permite comprobar sobre la marcha el efecto que tendría en un texto: Tamaños para cada tipo de letra, formatos (las hay que tienes distintos niveles de negritas), tiempos de carga etc.
✅ Existe muy buena sincronización para instalar fácilmente las fuentes Google para su uso en CMS tipo WordPress
Sincronización de una fuente Google Fonts con un CMS

Sincronización de una fuente Google Fonts con un CMS

Para los que no quieran hacer depender absolutamente todo su proyecto Web de Google existen alternativas de calidad para desarrollar la Web con Fuentes externas. En el post 10 Tipografías Clásicas Y Sus Alternativas Gratuitas De Google Font tiene toda la info que necesitas saber.

Combinar tipografías lo ideal para lograr el éxito

A la hora de diseñar una Web una de las preguntas, respecto a la fuente a utilizar, que más asiduamente nos hacemos es la siguiente: ¿Usamos una sola tipografía o combinamos más de una?

Pues bien, lo más adecuado es utilizar una fuente para los encabezados y otra para el resto del texto

Otro detalle que puede ser positivo utilizar radica en la combinación de usar una de las fuentes con serifa y otra sin serifa.

Combinaciones de fuentes recomendables

En las imágenes que a continuación os muestro quedan reflejadas varias combinaciones de tipografías que te harán posicionarte entre las páginas existentes con mejores Fuentes Web

Combinación Fuentes Noto Serif e Inconsolata

Combinación Fuentes Noto Serif e Inconsolata

Combinación Fuentes Roboto y Raleway

Combinación Fuentes Roboto y Raleway

Combinación Fuentes OpenSans y Lato

Combinación Fuentes OpenSans y Lato

Combinación Fuentes Monserrat y Oswald

Combinación Fuentes Monserrat y Oswald

Combinación Fuentes Quicksand y Roboto

Combinación Fuentes Quicksand y Roboto

Combinación Fuentes Glegoo y Lora

Combinación Fuentes Glegoo y Lora

Combinación Fuentes Kurale y RobotoSlab

Combinación Fuentes Kurale y RobotoSlab

Combinación Fuentes Quatroccento y OpenSans

Combinación Fuentes Quatroccento y OpenSans

Los detalles importan: Trucos para reforzar la elección de las mejores fuentes Web

La alineación de los párrafos

Muchas veces tendemos a aplicar alineación justificada a nuestros contenidos. Personalmente no me decanto ni por seguir esta costumbre ni por desaconsejarla. Simplemente ten en cuenta que hay ocasiones en las que el justificado provoca mucha separación entre palabras lo que hace generar un efecto no deseado en la escritura

Altura de líneas

Para evitar que las líneas queden muy juntas, lo que dificulta bastante su lectura, es recomendable establecer una separación entre líneas de 1.5 – 1.7. Esta medida es fácil de aplicar si usas plantillas como DIVI o ELEMENTOR que utilizan menús en donde se pueden configurar los aspectos relacionados con el formato del diseño de una página.

Combinación fondo y color de fuente

Siempre decídete por una combinación de fondo blanco o claro y fuentes negras u oscuras. Utilizar fondos oscuros y fuentes claras está totalmente desaconsejado.

Uso de cursivas y negritas

Es recomendable resaltar con negritas y/o cursivas las palabras clave del documento y aquellas que consideres que puedan ayudar a atraer la atención de los lectores. Esta estrategia ayudará a mejorar el SEO de tu página

Uso de las Mayúsculas

Puede ser interesante utilizar las mayúsculas en los encabezados del documento. Eso sí, si vas a tener varios encabezados procura ponerlos solo en aquellos más importantes (por ejemplo h1 y h2) ya que si las pones en todos los encabezados destruirás la estrategia de jerarquía de la página.

La tipografía de un Sitio Web, al igual que otros factores como los colores o las imágenes, es esencial para lograr atraer visitantes y que estos se terminen por convertir en clientes.

En este post te voy a explicar las claves para que elijas las fuentes Web más adecuadas para tu proyecto

Conceptos básicos que es necesario manejar

Podríamos enumerar más aspectos relacionados con las Fuentes Web pero vamos a centrarnos en los 3 más importantes.

Legibilidad

Te puede parecer que es un poco absurdo que te diga esto pero es que, por experiencia propia, en ocasiones nos ofuscamos con querer que nuestras páginas sean chulas y atractivas a los ojos de los demás pero nos olvidamos de lo más importante: Los textos deben ser perfectamente legibles, si no vamos por mal camino.

Una de las claves principales para la Creación de Contenidos Web está en que los visitantes puedan leer, sin dejarse los ojos, los textos publicados. Así que ya sabes siempre la legibilidad por delante del “Diseño molón”.

Comparación fuente legible y no legible

Primeramente la fuente ilegible, luego una elección de fuente correcta.

Dimensión de las Fuentes

Aquí, para determinar el tamaño adecuado para nuestras tipografías para Web, deberemos tener en cuenta si las estamos utilizando en un encabezado (existen varios tipos de encabezado, lo veremos en detalle en futuros post) o en un párrafo normal.

Un tamaño Standard podría ser el siguiente:

✅ h1: Entre 30 y 50 px

✅ h2: Entre 20 y 30 px

✅ h3 y h4: 18 – 20 px

✅ p (etiqueta para párrafos normales, no encabezados): Entre 12 y 16 px

Hay que precisar que, en función de la tipografía escogida, dos fuentes distintas con el mismo tamaño de encabezado pueden perfectamente tener dimensiones diferentes.

Contraste

Al confeccionar un documento es muy importante diseñarlo de tal manera que quien lo vaya leer pueda distinguir los distintos apartados que lo componen (de ahí la importancia de los encabezados) de manera que no resulte aburrida y compleja su lectura.

Además los términos que consideremos más importantes es recomendable destacarlos poniéndolos en negrita o subrayándolos lo que hará que se distingan claramente dentro del escrito.

También es conveniente, para hacer la lectura más amena, insertar algún elemento multimedia (imágenes o vídeos generalmente) a lo largo del documento.

Todos estos trucos forman parte de lo que denominamos contraste en la redacción de un documento.

Tipología de fuentes Web

Aunque existen multitud de tipografías disponibles todas ellas se agrupan en 3 familias:

Serif

Tipografía tipo Serif

Tipografía tipo Serif

Se usan habitualmente en libros, periódicos, revistas… En definitiva para fuentes impresas. Wikipedia define las fuentes serif como “Las gracias, serifas (del francés serif), remates, patines o terminales son adornos ubicados generalmente en los extremos de las líneas de los caracteres”.

Ejemplos de fuentes serif pueden ser la archiconocida Times New Roman o Century.

Sans Serif

Fuente sans serif

Ejemplo de Fuente sans serif

Son fuentes sin adornos en los extremos. Son las más usadas en los Diseños Web.

Ejemplos de fuentes Sans Serif pueden ser las famosas Arial o Helvética entre otras muchas

Script

Fuente Script

Modelo de tipografía Script, imitación escritura siglos pasados.

Son fuentes que tienden a imitar la forma de escribir del siglo XVII.

Se pueden utilizar para los títulos pues si se emplea en textos normales puede complicar bastante su lectura.

Dónde buscar fuentes que se adecuen a tu proyecto y como escoger las mejores

Hay diversas Webs que te permiten escoger tipografías pero sin duda lo más recomendable es acudir a Google Fonts. Te enumero sus ventajas porque es la elección más recomendada:

Interface Google Fonts

Imagen donde se explica como son las tipografías de Google Fonts.

✅ Es la Web que más variedad de tipografías ofrece. Más de 900 fuentes en donde escoger la que más de adapte a tus necesidades.
✅ Son gratuitas, libres de licencias.
✅ Tienes dos opciones de uso: Las cargas directamente desde el servidor de Google o las descargas a tu equipo y, a continuación, las instalas en tu CMS.
✅ Te permite comprobar sobre la marcha el efecto que tendría en un texto: Tamaños para cada tipo de letra, formatos (las hay que tienes distintos niveles de negritas), tiempos de carga etc.
✅ Existe muy buena sincronización para instalar fácilmente las fuentes Google para su uso en CMS tipo WordPress
Sincronización de una fuente Google Fonts con un CMS

Sincronización de una fuente Google Fonts con un CMS

Para los que no quieran hacer depender absolutamente todo su proyecto Web de Google existen alternativas de calidad para desarrollar la Web con Fuentes externas. En el post 10 Tipografías Clásicas Y Sus Alternativas Gratuitas De Google Font tiene toda la info que necesitas saber.

Combinar tipografías lo ideal para lograr el éxito

A la hora de diseñar una Web una de las preguntas, respecto a la fuente a utilizar, que más asiduamente nos hacemos es la siguiente: ¿Usamos una sola tipografía o combinamos más de una?

Pues bien, lo más adecuado es utilizar una fuente para los encabezados y otra para el resto del texto

Otro detalle que puede ser positivo utilizar radica en la combinación de usar una de las fuentes con serifa y otra sin serifa.

Combinaciones de fuentes recomendables

En las imágenes que a continuación os muestro quedan reflejadas varias combinaciones de tipografías que te harán posicionarte entre las páginas existentes con mejores Fuentes Web

Combinación Fuentes Noto Serif e Inconsolata

Combinación Fuentes Noto Serif e Inconsolata

Combinación Fuentes Roboto y Raleway

Combinación Fuentes Roboto y Raleway

Combinación Fuentes OpenSans y Lato

Combinación Fuentes OpenSans y Lato

Combinación Fuentes Monserrat y Oswald

Combinación Fuentes Monserrat y Oswald

Combinación Fuentes Quicksand y Roboto

Combinación Fuentes Quicksand y Roboto

Combinación Fuentes Glegoo y Lora

Combinación Fuentes Glegoo y Lora

Combinación Fuentes Kurale y RobotoSlab

Combinación Fuentes Kurale y RobotoSlab

Combinación Fuentes Quatroccento y OpenSans

Combinación Fuentes Quatroccento y OpenSans

Los detalles importan: Trucos para reforzar la elección de las mejores fuentes Web

La alineación de los párrafos

Muchas veces tendemos a aplicar alineación justificada a nuestros contenidos. Personalmente no me decanto ni por seguir esta costumbre ni por desaconsejarla. Simplemente ten en cuenta que hay ocasiones en las que el justificado provoca mucha separación entre palabras lo que hace generar un efecto no deseado en la escritura

Altura de líneas

Para evitar que las líneas queden muy juntas, lo que dificulta bastante su lectura, es recomendable establecer una separación entre líneas de 1.5 – 1.7. Esta medida es fácil de aplicar si usas plantillas como DIVI o ELEMENTOR que utilizan menús en donde se pueden configurar los aspectos relacionados con el formato del diseño de una página.

Combinación fondo y color de fuente

Siempre decídete por una combinación de fondo blanco o claro y fuentes negras u oscuras. Utilizar fondos oscuros y fuentes claras está totalmente desaconsejado.

Uso de cursivas y negritas

Es recomendable resaltar con negritas y/o cursivas las palabras clave del documento y aquellas que consideres que puedan ayudar a atraer la atención de los lectores. Esta estrategia ayudará a mejorar el SEO de tu página

Uso de las Mayúsculas

Puede ser interesante utilizar las mayúsculas en los encabezados del documento. Eso sí, si vas a tener varios encabezados procura ponerlos solo en aquellos más importantes (por ejemplo h1 y h2) ya que si las pones en todos los encabezados destruirás la estrategia de jerarquía de la página.