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 tipografía web, donde el soporte va a ser una pantalla o display con un resolución determinada que una tipografía para una aplicación móvil o la tipografía para un documento que va a se impreso en soporte físico.

Si bien tienen muchas cosas en común, la tipografía para web tiene ciertas «reglas» o mejor, cierto comportamiento que tenemos que conocer para aplicarlo correctamente en nuestros productos, o al menos para tomar decisiones razonadas en su elección para favorecer y potenciar el efecto de nuestro diseño.

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

Con la fuente que elegimos le mostramos a nuestros potenciales clientes nuestros «copys» (texto que incluye mensajes con intención comercial con el objetivo de conseguir conversiones o una compra por parte de nuestro cliente),  le contamos los detalles del producto, le informamos, le seducimos en nuestros «call to action» (o llamada a la acción, que generalmente es un botón donde indicamos al usuario cómo realizar la conversión).

Con la tipografía redactamos artículos, realizamos maquetaciones que tengan armonía y bloques de texto que sean atractivos y que inviten a ser leídos en lugar de ser ignorados.

Con la fuente tenemos que jerarquizar la información que mostramos al usuario, para que con un simple vistazo pueda obtener la información que le queremos dar. La fuente es por tanto un elemento básico para que nuestro cliente pueda entender nuestro mensaje.

La tipografía por tanto es uno de los pilares de la interfaz de usuario (UI) de nuestros productos, y uno de los elementos que más afecta a nuestra experiencia de usuario (UX) y por ello tenemos que conocerla y aplicarla correctamente.

No sólo es clave la clase de tipografía o tipografías elegidas para nuestro producto, sino como la aplicamos.

 

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 […]