03 – Tipos de fuente

Antes de tomar una decisión sobre cuál es el tipo de fuente que quiero usar en un proyecto, vamos a ver las clases de tipografía más habituales.

  • Serif: Este tipo de fuentes tienen una señal característica, que se conoce como “serifa” y que son esos ornamentos que tiene cada letra en sus extremos. Este tipo de letra es aconsejado para bloques de textos muy largos, ya que las serifas dotan al texto de legibilidad. Son muy cómodas de leer. Además, tienen un aspecto “retro” que en ciertos diseños pueden dotar de más coherencia a un proyecto. Fuentes de tipo serif son «Times New Roman», «Palatino», «Georgia», etc.
  • Sans Serif: También conocidas como fuentes de palo seco, porque carecen de serifa u ornamentos. Tiene un aspecto muy moderno y elegante, y se suele utilizar en títulos, subtítulos o textos no demasiado largos, ya que no son tan legibles y cómodas de leer como las fuentes serif. Fuentes sans serif son: «Helvetica», «Avenir», «Lucida Grande», «Open Sans», etc.
  • Slab Serif: Este tipo de fuente es una mezcla entre ambas. Son de palo seco, pero con una serifa muy ancha, lo que le dota de mayor legibilidad. Puede ser interesante de utilizar en ciertas ocasiones, sobretodo si tenemos un texto largo en un proyecto, y el aspecto “retro” de una fuente de tipo serif puede perjudicar la estética que hemos elegido.

El tipo de fuente que usemos, va a depender del carácter que le quieras dar a tu diseño, sin perder de vista la usabilidad, sobretodo en textos largos.

Un aspecto importante que tenemos que tener en cuenta es sobre las pantallas retina, las fuentes sans serif, pueden leerse casi como las serif.

Introducción a la tipografía web - Serifas

En cuanto al número de tipografías a elegir, va a depender, sobretodo del tipo de proyecto. No es bueno mostrar muchas tipografías sino es precisamente esa la intención del diseño que quieres proponer.

Generalmente no es necesario más de una tipografía. Recuerda que puedes utilizar grosores, color y tamaño para jerarquizar el texto de un documento, por lo que en ocasiones utilizar varios tipos de fuente sólo distrae al usuario y es contraproducente para nuestro diseño.

Si tu proyecto tiene mucho contenido, lo más usual es utilizar dos fuentes, una de palo seco para títulos o subtítulos, y una slab-serif o serif para los textos de mayor longitud. También existen familias de fuentes que contienen tanto sans-serif como serif o slab. Un ejemplo es la familia Museo, que dispone de Museo Sans y Museo Slab.

Lecturas adicionales complementarias:

Lecturas recomendadas:

Este capítulo no tiene lecturas adicionales recomendadas.

Capítulos

(Ir a la portada de Guía de tipografía web)

01 – Prólogo

Si algo he aprendido de diseño en mi carrera profesional es la importancia de la Tipografía. En todos los aspectos de nuestra vida, la tipografía tiene un enorme impacto. Nos […]

02 – Introducción a la tipografía web

Introducción a la tipografía web Antes de comenzar a ver qué reglas debemos usar para componer nuestros elementos tipográficos es importante que aclaremos una cosa. No es lo mismo la […]

03 – Tipos de fuente

Antes de tomar una decisión sobre cuál es el tipo de fuente que quiero usar en un proyecto, vamos a ver las clases de tipografía más habituales. Serif: Este tipo […]

04 – Cómo usar una fuente

Jerarquizando el texto: pesos, tamaños y colores. La jerarquía del texto suele y debe ser bastante tradicional, y que en los proyectos web casi siempre se compone de un título […]

05 – El color en la tipografía

Para dar una mayor fuerza a la jerarquía, además del tamaño y el peso de la fuente, podemos aplicar el color. Para los textos, y en pos de la legibilidad, […]

06 – Interlineado, interletrado y márgenes

Los márgenes, el espacio, “el aire” entre los elementos de texto, son necesarios para que el diseño tenga armonía y la estética que necesitamos. Estos elementos de espacio y de […]

07 – Longitud de los párrafos

A la hora de maqueta secciones de texto, es muy importante la relación de escala con el documento. En el diseño web, generalmente se parte de mallas, rejillas o grills, […]

08 – Conclusión

No es bueno generalizar. Y menos en diseño. Pero en este caso creo que una serie de “reglas” o puntos de partida pueden ser útiles y darían sentido a la […]