En el rediseño de mi sitio web empecé por trabajar con la tipografía. Podríamos decir que el nuevo diseño sigue la filosofía mobile first and type first, concepto que me acabo de inventar pero que me parece apropiado.

Punto de partida

Partía de una composición con Chaparral Pro para los cuerpos de texto en un gris muy oscuro contra un fondo gris muy claro. Como tipografía secundaria usaba Museo Sans para elementos de menú y metadatos.

La caja de texto tenía un ancho de 528 px en su versión de escritorio, hoy me parece algo estrecha pero necesitaba más espacio para alojar dos columnas, una con la información del post y otra, usada ocasionalmente, para mostrar la información bibliográfica en los comentarios de libros de diseño.

Con esta longitud de línea establecí el tamaño del cuerpo en 18 px para presentar 9 – 11 palabras por línea (alrededor de 65 caracteres). El interlineado, fijado en 24 px, definía la rejilla base y marcaba el ritmo vertical de todos los elementos de la página.

Candidatas y elegidas

Para el nuevo diseño buceé en el catálogo de Typekit, mi proveedor de fuentes para web, y me metí en una búsqueda que parecía no tener final. Quería mantener el mismo juego de contrastes de una fuente de palo seco y otra con remates. Después de hacer pruebas con Tisa y Calluna decidí mantener Chaparral Pro. Me parece que refleja mejor el tono. Sigue soñando con el día en que Typekit incluya en su catálogo la preciosa Scala.

cuerpo-texto-v2

Con la tipografía secundaria tuve más dudas. Soy bastante indeciso por naturaleza. Elegía una para dudar al poco, cambiar, dudar más, volver atrás, así una y otra vez. Las candidatas eran Adelle, Meta Web Pro y Proxima Nova.

seleccion-tipos-cabecera

La forma de la letra que más me entusiasmaba era Meta Web Pro y gran parte de los bocetos los hice con ella. Fue entonces cuando me di cuenta de que competía demasiado con la personalidad de Chaparral Pro. Quedaba todo demasiado llamativo. Finalmente opté por la mayor sencillez de Adelle. Esta es la tipografía que va a estar en el nuevo diseño. Creo. De momento. Veremos

Definiendo tamaños

En la nueva maqueta la columna de texto se expande. En la versión de escritorio pasa de 527 px a casi 700, una longitud de línea un 32% mayor. Esta nueva medida requiere ajustes en el tamaño, que pasa de 18 px a 27, un 50% más. Proporcionalmente crece más el tamaño del texto que la longitud de línea, ahora entran unos 5 caracteres menos, sigue siendo una cantidad apropiada y el texto gana protagonismo y legibilidad.

diferencia-tamanos

Tipografía responsive

En la nueva versión los tamaños del cuerpo de texto cambian en función del tamaño de pantalla del dispositivo del usuario. El criterio es sencillo en principio: que la experiencia de lectura sea similar a la lectura en papel, teniendo en cuenta la distancia entre el lector y el texto.

Así, el texto tiene un cuerpo menor cuando se lee en un móvil porque lo habitual es que la pantalla esté más cerca de los ojos del lector. A medida que la pantalla es más grande el brazo se extiende ampliando la distancia entre ojos y texto por lo que el cuerpo crece.

El texto presenta su cuerpo mayor en la versión de escritorio para que el lector pueda sentarse cómodamente a leer los posts sin necesidad de la visión de superhéroe que hacía falta hace unos años cuando se estilaba plantar textos a 10 px.

Ya queda poco para ver en acción a Adelle y Chaparral Pro y ver cómo se comportan juntas. Creo que hacen un buen equipo, se complementan bien y ofrecen un juego de contrastes interesante. Otro pequeño detalle es que aumenta el contraste entre texto y fondo en ambas direcciones (el texto es casi negro y la página es blanca).

Cuando el nuevo diseño tenga un poco de recorrido y haya publicado varios artículos con las nuevas maquetas habrá llegado el momento de parar, dar un paso atrás y ver si todo funciona como espero que funcione o si tendré que hacer ajustes.

Tipografías mencionadas

Adelle
Chaparral Pro
Meta Web Pro
Proxima Nova
Calluna

Enlaces relacionados

Uso de la tipografía para mejorar el diseño de la web 
Tipografías web de Typekit
Tipografías web: uso de font-face y typekit

¿Te ha gustado el post? Puedes seguirme en Twitter o en Facebook donde seguimos hablando de diseño web