comment 0

Introducción a la tipografía web

Antes de comenzar, una pequeña aclaración: no es lo mismo la tipografía web, donde el soporte de la misma es un display o pantalla con una resolución determinada, que una tipografía para una aplicación móvil o la tipografía para un documento que va a ser impreso.
Si bien tienen muchas cosas en común, la tipografía para web tiene ciertas “reglas” o cierto comportamiento que tenemos que conocer para aplicarlo correctamente en nuestros proyectos, o al menos para tomar decisiones razonadas en su elección para favorecer y potenciar nuestro diseño.

Lo que toda tipografía tiene en común es que da coherencia a tu proyecto. La fuente debe incrementar el sentido de un diseño. Es lo que da carácter. Incluso puede pasar desapercibida para tu cliente si está bien elegida, pero te aseguro que no pasará desapercibida si está mal elegida.

Cómo cambiaría el diseño de la web de Apple con otra fuente...

Cómo cambiaría el diseño de la web de Apple con otra fuente…

Con la fuente que elegimos le mostramos a nuestros potenciales clientes nuestros copys, le contamos los detalles del producto, le informamos, le seducimos en nuestros call to action. Con el texto creamos artículos, realizamos maquetaciones que tengan armonía y bloques de texto que sean atractivos. Con la fuente tenemos que jerarquizar la información que le mostramos al usuario, para que de un simple vistazo pueda obtener la información que le queremos dar. La fuente es básica para que nuestro cliente pueda entender nuestro documento, para que tenga éxito.

La tipografía es uno de los pilares de la interfaz de usuario de nuestros proyectos, y de los que más afecta a nuestra experiencia de usuario final, por ello tenemos que conocerla para aplicarla correctamente.
No sólo es clave que clase de tipografía (o tipografías) elegir para el proyecto, sino, cómo aplicarla.

Hay varios tipos de fuentes, pero como esta entrada es una pequeña introducción, vamos a centrarnos en las tres clases de tipografía web por excelencia: serif, sans serif y slab.

Eligiendo el tipo de Fuente

Antes de tomar una decisión sobre cual 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.

La app de iBooks de Apple usa fuentes con Serifa para legibilidad.

La app de iBooks de Apple usa fuentes con Serifa para legibilidad.

Fuentes disponibles en iBooks, la mayoría son Serif.

Fuentes disponibles en iBooks, la mayoría son Serif.

– 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.

En la web de Apple siempre encontramos fuentes de tipo Sans Serif o de palo seco.

En la web de Apple siempre encontramos fuentes de tipo Sans Serif o de palo seco.

– 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.

Ejemplo de una tipografía tipo Slab
   
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.

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.

Una familia con dos tipos de tipografías: Slab y Sans

Aplicando la fuente que hemos elegido

Cómo jerarquizar 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 y de una descripción, o título más subtítulo y descripción para jerarquizar el contenido.
Generalmente el título debe ser el concepto, debe hacer el efecto llamada a nuestro usuario, y el subtítulo se utiliza para precisar y dar más detalle del título. La descripción realmente es leída exclusivamente por los clientes potenciales interesados por el título y en menor medida por el subtítulo.

Wunderlist_site

En este caso de Wunderlist, se sigue el patrón Z donde el usuario lee de izquierda a derecha y de arriba abajo, hasta leer todo el contenido. Las imágenes hacen de articulación. La jerarquía en la tipografía es evidente y facilita la lectura al usuario.

Jerarquía por pesos

Esta jerarquía se puede diseñar de diferentes formas, y obtendremos diversos resultados. El tamaño de la fuente y el peso, suele ser mayor en los títulos, porque es el “core” de nuestro mensaje. Es muy normal utilizar fuentes bold o semibold.
En las descripciones generalmente se utilizan pesos “medium”, “regular” o “normal”, ya que el mayor cometido es que al tener mayor cantidad de texto sea legible y cómodo de leer.
En los subtítulos generalmente se juega con el contraste entre el título (bold) y la descripción (regular) y se suele utilizar una fuente de tamaño un poco inferior al título pero superior a la descripción, lo cual nos permite “adelgazar” la fuente con un peso light, fina o semilight, de forma que se suele usar una fuente un poco menor y con muchísimo menos peso.
Gracias a las pantallas retina, y a los resoluciones de los dispositivos que se utilizan hoy en día, pueden utilizarse fuente finas sin ningún temor de legibilidad.

Jerarquía por tamaños

En cuanto a tamaños mínimos y la relación entre la jerarquía de tamaños: siempre debemos de considerar la usabilidad y la legibilidad.
En web pienso que jamás deberíamos usar una fuente por debajo de 12-14 px. Y un peso de regular, ya que un menor peso haría menos legible este texto.
Tomando como base esa medida, podríamos establecer una relación con el tamaño máximo para que exista coherencia entre todos los tipos de texto de nuestro documento, y se perciba la jerarquía.
No deberíamos de usar para subtítulos más del doble del tamaño del texto de una descripción, ni más de la mitad del tamaño del subtítulo para el título.
Al tener unos tamaños mayores, podemos valorar en disminuir el peso de subtítulo e incluso título.
No me gusta establecer cantidades fijas en elementos del diseño, porque al fin y al cabo, las normas están para romperlas y así favorecer la creatividad, pero sí es cierto que una relación ordenada entre los tamaños de las fuentes del documento nos van a ayudar a dar coherencia, y el usuario final lo va a notar.

Esta es la jerarquía que hemos creado.

Esta es la jerarquía que hemos creado.

Resumiendo, si usamos para una descripción un texto de 12 px, no usar más de 24 px para el subtítulo ni más de 36 para el título.
Podemos acentuar o atenuar el tamaño del texto con su peso, de forma que a mayor tamaño, menor puede ser el peso de la fuente, dando más aspecto de sofisticación.
Las combinaciones entre tamaños y textos son casi infinitas.

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, normalmente se utilizan negros y grises, generalmente colores neutros que podemos obtener de nuestra paleta de colores, tal y como vimos en el anterior artículo dedicado al color.
En muchas ocasiones, hay palabras o elementos que, por potenciar el mensaje que queremos dar, debemos resaltar, y podremos hacerlo con el peso o utilizando itálicas.
Para indicar usabilidad, como por ejemplo los enlaces se suele utilizar el color primario de la web y un subrayado, de forma que el usuario de una forma rápida y sencilla interpreta que ese texto en concreto se trata de un enlace.
Para otros datos en el texto, como una fecha, una aclaración, los pies de ilustraciones o las citas, se suele utilizar un formato diferente al que estamos usando para el texto en general, y destacarán de la forma en la que nos interese, dándole protagonismo si apoyan nuestro mensaje.

Diseño de las citas en theverge.com

Diseño de las citas en theverge.com

Existen muchas herramientas donde poder combinar diferentes fuentes y tamaños para analizar sus relaciones antes de aplicarlas a nuestros proyectos, como por ejemplo http://www.typegenius.com

Typegenius, una gran herramienta para combinar tipos de fuentes

Typegenius, una gran herramienta para combinar tipos de fuentes

Interletrado, interlineado, 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 negativo, debemos de usarlos para dar coherencia, continuidad y dirección a nuestros bloques de texto, que al fin y al cabo dan el mensaje que queremos transmitir a nuestros usuarios. Es el objetivo que perseguimos como diseñadores.

Nuestros usuarios leerán y se relacionarán con nuestro contenido en relación a la proximidad que tengan entre sí los diferentes elementos del texto. No debemos interrumpir esta proximidad y comunicación por un espacio excesivo entre elementos.
Por este motivo debemos decisiones en relación al interletrado, el interlineado y los márgenes del bloque de texto:

interletrado es la separación entre dos letras, el aire, entre el extremo derecho de una y el límite izquierdo de la otra.
interlineado es la distancia entre la cara inferior de dos renglones. Se recomienda que el interlineado sea igual a los márgenes mínimos.
margen: es la distancia que debemos dejar alrededor de nuestro bloque de texto.
 

Interlineado e interletrado.

Interlineado e interletrado.

La relación entre estos tres elementos va a afectar profundamente al diseño de un bloque de texto, y además se relacionan entre sí. Para complicar aún más las cosas, estos elementos se relacionan con el tamaño de la tipografía, de forma que, a mayor tamaño, menor será el interletrado que permite, y viceversa, a menor tamaño de tipografía, mayor interletrado necesita.
En cuanto al interlineado, a menor tamaño de la fuente, mayor interlineado se necesita.

Al igual que ocurre con el tamaño de las fuentes, estas relaciones se puede parametrizar. Por ejemplo, si el tamaño de la fuente es de 12 px, el interlineado debe ser al menos de 5 px más o un 145% del tamaño, esto es, 17 px. Un interlineado menor tiende a crear un texto menos legible, y un interlineado mayor tiende a perder coherencia por proximidad. Toma estos valores como referencia, como una aproximación, pero nunca como algo fijo. Intenta experimentar.

Como resumen, para tamaños de fuente grandes, como en títulos, tenemos que reducir interlineado e interletrado para no perder el carácter de título. Lo mismo ocurre con semitítulos, sobretodo cuanto utilizamos fuentes con poco peso, como light.
Por contra, cuando tenemos fuentes menores, como ocurre en las descripciones, debemos tener a aumentar interletrados e interespaciados para ganar legibilidad.

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, como los que se usan en ciertos frameworks como 960 grid system o twitter bootstrap.
Aunque ya veremos estos sistemas con mayor detenimiento, se basan en distribuir el contenido en base a un número de columnas.
Por ejemplo, si el documento tiene un ancho total de 12 columnas, y queremos crear 3 bloques de texto distribuidos en horizontal, cada bloque de texto ocupará 4 columnas.

Una malla es una referencia en base a la cual se ordenan los elementos de una web para que tengan armonía. Un error muy frecuente es basarse de forma muy estricta en ella y tener una longitud de párrafo muy corta o demasiado larga.
Si un párrafo es demasiado largo, el usuario tiende a no leer la segunda línea, porque pierde cohesión, mientras que si el párrafo es demasiado corto no es legible y el usuario pierde la atención y el interés.
Como orientación para la longitud de párrafos es que no tengan más de 80 caracteres por línea ni menos de 50 caracteres.

Ejemplo de longitudes de párrafo.

Ejemplo de longitudes de párrafo.

También puede ser interesante calcular el tamaño de la fuente de nuestro proyecto en base a que al menos el párrafo contenga 50 caracteres.

Dónde conseguir fuentes

Hay lugares donde conseguir fuentes de forma gratuita, si bien en función del proyecto, no es lo más conveniente y tenemos que tirar de fuentes de pago (bastante caras).
En proyectos web, lo normal es usar el servicio de Google fonts, que además de descargar las fuente de forma gratuita, nos permiten añadirlas a nuestro proyecto web de una forma muy sencilla.

Google fonts, la herramienta de Google para insertar fuentes en nuestras webs.

Google fonts, la herramienta de Google para insertar fuentes en nuestras webs.

Hay otras opciones de pago como Adobe Typekit, que contiene fuentes de mayor calidad y más profesionales.
Se trata de una herramienta muy interesante, y tiene un servicio gratuito para determinados proyectos. Lo interesante de Adobe Typekit es que permite el uso de fuentes cuya licencia de forma independiente es muy cara, como la archiconocida y archicara Proxima Nova.

Adobe Typekit, una herramienta de las imprescindibles.

Adobe Typekit, una herramienta de las imprescindibles.

Analizando un caso real: Medium

Medium es una plataforma de artículos. Una alternativa muy interesante a los blogs de toda la vida. Un cambio de enfoque.
En este producto por tanto, el principal protagonista son los post, y los posts son en su mayoría texto. Por ello vamos a intentar analizar el uso que han realizado de la tipografía en base a lo que hemos aprendido en este artículo:

Tipografía elegida:

En este caso han elegido dos tipografías que se llevan bastante bien, una tipografía tipo sans-serif para los títulos de los artículos, Lucida Grande, y una tipografía con serifa para favorecer al máximo la legibilidad del texto de los artículos.

Jerarquía:

Han diseñado la jerarquía por tamaños y pesos, de esta forma, el título tiene un tamaño de 60 px, siendo el mayor tamaño en todo el texto, y con peso bold. El texto del artículo, tiene un tamaño de 22 px y un peso de regular, con un interletrado de + 2 px para darle aire, y un interespaciado de 150%. Para el subtítulo han utilizado una fuente Lucida Grande Light con un interletrado de -2px, y un tamaño de 32 px para no robar protagonismo a los títulos de los artículos.
La longitud de los párrafos tienen una media de 70 caracteres.
Para el nombre del autor han utilizado itálica con peso para darle énfasis y resaltarlo del resto del documento con una jerarquía menor que el título y el subtítulo, y para los enlaces un subrayado para indicar interactividad.

Analizando fuentes en Medium.

Analizando fuentes en Medium.

Como ejercicio, intenta analizar y reflexionar sobre como han utilizado en iAWritter la tipografía en este sección de su web.

Writter, un ejemplo inspirador de cómo usar las fuentes en un proyecto web.

Writter, un ejemplo inspirador de cómo usar las fuentes en un proyecto web.

Resumiendo

Para recopilar, y de forma orientativa, en base a un texto mínimo de 12 px, obtendríamos los siguientes valores para ajustes del texto:

Tamaño mínimo de fuente: 12-14 px
Tamaño relativo de subtítulo: 24 px
Tamaño relativo de título: 36 px
Tamaño relativo interletrado: 17 px
Tamaño relativo interespaciado: 17 px
Tamaño mínimo de margen: 17 px
Longitud mínima del párrafo: 50 caracteres
Longitud máxima del párrafo: 80 caracteres

Para próximas entregas vamos a hacer un ejercicio práctico donde aplicaremos todos estos conceptos y tomaremos decisiones de diseño.

Otra entrada que se vuelve a quedar enorme, intentaré tomar medidas con las siguientes :)

Clasificado como: Diseño

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

Leave a Reply