Tipografía


En las páginas web la tipografía tiene un valor capital,facilita la lectura de los contenidos y la navegación de los usuarios.

Es importante que quede muy clara la diferencia entre el texto de intrefice — menus, migas de pan, firmas... — y el texto de contenido.

Portada New York Times con tipografía
Portada New York Times sin tipografía

Gerarquía tipográfica es la relación entre los diferentes elementos tipográficos de la página.

La lectura por pantalla es más anárquica y superficial que la de papel. Hay establecer gerarquias para poder ofrecer al usuario 3 niveles de lectura:
  • Nivel superficial.
  • Nivel de lectura en diagonal.
  • Nivel de lectura en profundidad.

Esquema gerarquia tipográfica.
Gerarquia definida tipográficamente.
Portada tipográfica NYT.

Con las relaciones tipográficas guiamos a los usuarios por la página, y condicionamos sus acciones.

Shyp.com by Dann Petty via dribbble.com

Escala tipográfica de Material Design (Google).

La definición de una escala tipográfica ayuda a tener acotado el modo en que se visuaizará la tipografia en cada formato.

Escala tipográfica Airbnb - Fuente: airbnb.design
type-scale.com

Existen recursos como Type Scale que ayudan a generar escalas tipográficas resposive, y que permiten copiar los estilos CSS resultantes.