tentuRed

Consigue tus objetivos a través de la red

  • Servicios
  • Por qué ttR
  • Portfolio
  • Contacta
  • Blog

9 abril, 2017 Por Jesús Deja un comentario

¿Qué tipos de letras debes usar en tu web?


Los tipos de letras en una página web son fundamentales, no sólo para que se lea de forma cómoda, sino para darle el toque personal que siempre buscamos. Pero, ¿qué tipos de letras y cuántos debes usar en tu web?


Antes de empezar, y por si no estás habituado a la nomenclatura, a los tipos de letras nos referimos a menudo como fuentes.

¿Dónde se usan los tipos de letras en una página web?

  • Cuerpo. Es la zona de los textos de las entradas, páginas, y en general la mayor parte de información de nuestra web.
  • Títulos. De entradas, páginas, secciones, anuncios, etc.
  • Menús.
  • Logo y nombre de la web.

Los anteriores son los elementos más frecuentes donde podemos «jugar» con las fuentes. Pero además, podemos usar fuentes en los widgets (zonas de información de la barra lateral, el pie…), textos de la home (página inicial al entrar en tu web), textos de botones, etc.

Tipos de fuentes según Google Fonts

Google Fonts es un repositorio de fuentes que puedes usar en tu web. Google las clasifica en:

Serif

Las gracias o serifas son pequeños adornos situados generalmente en los extremos de las líneas de los caracteres tipográficos.

Ejemplos de fuentes serif

fuente serif fuente serif fuente serif
Sans serif

Como el propio nombre indica (en francés) las fuentes sans serif son las que no tienen serifa, mostrando trazos más sobrios y rectos.

Ejemplos de fuentes sans serif

fuente sans serif fuente sans serif fuente sans serif
Las fuentes serif y sans serif son muy legibles (unas más que otras) y tienen un uso muy generalizado, tanto el cuerpo como en el resto de zonas de la web. Yo, en general, prefiero usar las sans serif en el cuerpo de la web, por su sencillez y trazo directo. Para mí son más cómodas de leer.

Handwriting

Como te puedes imaginar por el nombre, estas fuentes simulan una escritura manual.

Ejemplos de fuentes handwriting

fuente handwritingfuente handwritingfuente handwriting
Este tipo de fuentes se pueden usar, por ejemplo, en blogs de literatura, bien en el cuerpo o en los títulos de las entradas.

Monospace

La característica principal de estas tipografías es que todos sus caracteres ocupan el mismo espacio.

Ejemplos de fuentes monospace

fuente monospace fuente monospace fuente monospace
Una web de carácter vintage podría usar esta tipografía.

Display

Las fuentes display están especialmente diseñadas para usarlas en tamaños grandes, como carteles, grandes títulares, rótulos, etc. Suelen tener trazos gruesos, de mucho atractivo e impacto para el lector.

Ejemplos de fuentes display

fuente display fuente display fuente display
Una web de perfil creativo, como una agencia de diseño gráfico, decoración, etc., podría usar esta tipografía.

Hasta aquí un poco de teoría.

¿Cómo se pueden combinar las fuentes en una web? Ejemplos

Primero, dos consejos iniciales:

  • Aplica el sentido común y sé práctico. Un tipo de letra poco legible, de tamaño pequeño, con poco interlineado, que no contraste bien con el fondo… espantará a tus potenciales clientes y lectores en general.
  • Como los colores, no uses tropecientas fuentes. Como máximo tres está bien. Una para el cuerpo, otra para títulos, y si quieres otra para menús o botones. Pero no más.

¿Qué tipos de fuentes debo combinar? Depende de la temática de tu web, de lo que quieras transmitir, de tu instinto. Pero una primera combinación básica es usar una fuente sans serif para el cuerpo con una serif en otras zonas de la web.

Veamos algunos ejemplos de proyectos que hemos desarrollado en tentuRed.

En septimamenor hemos usado la elegante fuente sans serif «Open Sans» en el cuerpo junto a la discreta serif «Taviraj» en los títulos. La integración de fuentes es muy fluida.
En el logo y lema usamos una fuente de pago, la display «Emblema» de Creative Market. Las fuentes de Google Fonts son gratuitas, pero a veces puede merecer la pena pagar por tener un diseño más exclusivo.

En nuestra web tentuRed sólo hay una fuente, la súperlegible «Ek Mukta», sans serif 100%. No quisimos combinar otra fuente para dar importancia al contenido.

RasaPoeta es otro cantar. Es una web muy sensible; su contenido son poemas. Adivina qué tipo de fuente elegimos 😉 Así es, una handwriting. La «Bad Script» encaja perfectamente con los poemas de este blog; le imprime un carácter personal en cada entrada. La otra fuente principal usada para el resto de textos es «Georgia», una amable serif.

Interlineado

Otra cuestión muy importante para tener una buena legibilidad es el interlineado, que mide la altura de la línea de texto. Fíjate en el siguiente ejemplo:

interlineado
Ejemplo de interlineado

Creo que queda bastante claro qué párrafo es más legible según su interlineado, ¿no?

Para terminar, y como siempre, apelo a tu participación. ¿Sabes qué fuentes usas en tu web? ¿O cuáles te gustaría usar? 😉

Comparte!Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Etiquetado con: fuentes en la web, fuentes en una página web, tipos de letra en la web

Deja una respuesta Cancelar la respuesta

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

 

Información sobre protección de datos
Responsable: Jesús Sánchez León | Finalidad: gestionar los comentarios | Legitimación: tu consentimiento otorgado en el formulario | Destinatarios: los datos que me facilitas estarán alojados en los servidores de Webempresa, proveedor de hosting de esta web. Aquí puedes leer la política de privacidad de Webempresa: https://www.webempresa.com/aviso-legal.html | Derechos: acceso, rectificación, cancelación y oposición de tus datos

Contacta

info@tentured.com
+34 650 127 824

¿Qué quieres buscar?

Nos vemos en

  • Facebook
  • Google+
  • Twitter

Creative Commons

Licencia de Creative Commons
Esta obra cuyo autor es tentuRed está bajo una licencia de Reconocimiento-NoComercial 4.0 Internacional de Creative Commons.
Privacidad y cookiesFlecha arriba
Esta web usa cookies
Para mejorar tu experiencia de usuario y funcionalidad, esta web instala "cookies" en tu ordenador. Aceptar todas Ajustes Política de cookies
Manage consent

Resumen de privacidad

Este sitio web utiliza cookies para mejorar tu experiencia de navegación. Las cookies necesarias se almacenan en tu navegador, ya que son esenciales para el funcionamiento correcto del sitio web. También utilizamos cookies de terceros que nos ayudan a analizar cómo utilizas este sitio web. Estas cookies se almacenarán en tu navegador solo con su consentimiento.
Necesarias
Siempre activado
Las cookies necesarias son absolutamente esenciales para que el sitio web funcione correctamente. Estas cookies garantizan funcionalidades básicas y características de seguridad del sitio web, de forma anónima.
Analíticas
Las cookies analíticas se utilizan para comprender cómo los visitantes interactúan con el sitio web. Estas cookies ayudan a proporcionar información sobre métricas, el número de visitantes, la tasa de rebote, la fuente de tráfico, etc.
GUARDAR Y ACEPTAR