Usando la tipografía para mejorar el diseño de la web

Por Ernesto Jiménez · 30 abril, 2013
Publicado en Diseño web

diseno-web-y-tipografia-web

Ya sabemos que el diseño web es 95% tipografía, ¿no sería entonces lógico que dedicáramos algo más de esfuerzo a cuidar el texto de nuestras maquetas?

Muchas veces encuentro páginas web con diseños excelentes, esquemas de color armoniosos y contrastados, con imágenes espectaculares que apoyan el contenido pero que fallan a la hora de disponer las cajas de texto empobreciendo drásticamente la impresión general.

Parece que el diseñador hubiera dejado el trabajo de texto para el final: «…y aquí, en este espacio, va el texto». Quizá se deba a que suele recibir el contenido al final, cuando el cliente ya ha visto su página. El hecho de no disponer de un material cuidado y de calidad desde el principio puede hacer que no se le dé la importancia que merece.

No deberíamos olvidar que el objetivo primero de cualquier sitio es comunicar nuestro mensaje, que nos lean. Marketing de contenidos, nos suena, ¿verdad? Ese contenido tiene que ir presentado de forma impecable.

En internet sí se lee si el contenido es de calidad y está bien presentado. Estoy cansado de oír que en internet no se lee. No creo que sea cierto. Si no se lee más puede que sea porque no nos hemos preocupado lo suficiente por la forma en que presentamos los textos. Desde luego no voy a leer tu texto de 600 palabras con un cuerpo de 11 píxeles y un interlineado que me hace llorar. Así no podría leer ni a Cortázar.

Estas son algunas sugerencias que no está de más tener en cuenta:

Aumenta el tamaño del texto

Si tu sitio web está compuesto en un cuerpo de letra menor a 16 píxeles estás perdiendo dinero.

16 píxeles no es un tamaño grande para el texto, es un tamaño ideal. A una distancia adecuada del monitor lo percibimos de forma similar al tamaño que leemos en un libro en la playa.

Contents, una revista online para leer

Contents, una revista online para leer

Atrás quedaron los sitios en Flash con las tipografías píxeles minúsculas. Estuvieron muy de moda una época pero era un horror en todos los sentidos. Afortunadamente hemos pasado de una web efectista pero hueca a otra en la que, por fin, se empieza a valorar el contenido bien presentado.

Ajusta el interlineado

Cuando digo ajustar el interlineado me refiero en un 80% de los casos a ampliar el interlineado. Me pone muy nervioso ver bloques de texto en los que apenas hay espacio para respirar entre líneas. Leer así es una tortura. Seamos generosos y creemos preciosas texturas tipográficas con un interlineado adecuado. La propiedad de CSS para esto es line-height. Cada tipografía y bloque de texto exige una medida pero definir un interlineado del 140% del tamaño del cuerpo nos puede servir como orientación.

Vigila la longitud de las líneas

Un error habitual es disponer cajas de textos demasiado anchas con muchas palabras por línea. Esto dificulta la lectura, la hace lenta y pesada y el cansancio aparece enseguida. Nuestro ojo tiene que trabajar en exceso al obligarlo a recorrer una gran distancia para empezar la siguiente línea.

Captura de pantalla 2013-04-30 a la(s) 08.23.53

 

Que nuestra página se adapte al ancho del navegador no significa que nuestro texto tenga que ir de lado a lado de la pantalla. Una longitud ideal muestra entre 50 y 75 caracteres por línea.

¡Tracking!

Los diseñadores de libros y revistas disfrutan desde hace muchos años del tracking. Los diseñadores de web disponemos desde la versión 2.1 de CSS de la propiedad letter-spacing que es un primo pequeño y lejano del tracking de los programas de edición.

Este mayor control nos permite, por ejemplo, ajustar la prosa de las mayúsculas como en la columna de la derecha de este post que tienen un espaciado ligeramente abierto.

Actualiza tu paleta de tipografías web

Ya hemos hablado varias veces de la revolución que ha supuesto la posibilidad de utilizar tipografías web en nuestros diseños. Somos libres de utilizar casi cualquier fuente. Actualiza tu paleta, descubre con qué tipos trabajas mejor, con cuáles te sientes más cómodo, e incorpóralos. Tus diseños mejorarán sustancialmente.

Yo me di de alta en Typekit. Al principio contraté el plan personal pero pronto pasé al siguiente. Por muy poco más tengo acceso a un catálogo de fuentes mayor que pueda usar en todos los sitios que me parezca.

Estos son solo algunos consejos generales. Hay muchos libros maravillosos para aprender diseño tipográfico. Pensar con tipos es uno de los imprescindibles.

Decía al principio del post que el diseño web es 95% tipografía. Aquí tienes el artículo original de Information Architects en caso de que no lo conozcas.

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