Tipografía web responsive: tamaño e interlineado

Empieza con una pregunta: ¿para qué sirve el texto que tienes en tu página web? ¿Qué papel desempeña? El texto es el pilar maestro, el eje imprescindible sobre el que gira todo en la web: lo que haces, lo que quieres, tus productos, tus servicios, en esencia, tus textos muestran lo que eres.

¿Cuál debería ser entonces tu primer objetivo en lo que a tu texto se refiere? Grábate esto a fuego: quieres que tu texto se lea. De nada sirve todo el esfuerzo que hagas en la web si tus palabras no llegan a un lector, que será tu futuro cliente, seguidor, amigo o lo que sea que persigas. Debes conseguir que tu mensaje sea recibido de la mejor forma posible.

El contenido es el rey y el texto es el vehículo para que tu contenido viaje y cumpla objetivos. Puede parecerte sencillo pero hay profesionales de la tipografía que dedican el 100% de sus carreras a estudiar la forma del texto.

No se trata solo de tomar decisiones sobre la forma en sí de las palabras (la elección de la fuente tipográfica), también tendrás que definir un cuerpo (un tamaño) para tu texto y cómo se relacionan unos elementos con otros (las letras entre sí, unas palabras con otras, una línea con la anterior y la siguiente, un conjunto de párrafos y el bloque de texto con el resto de elementos que conviven en la página.

Cómo elegir el tamaño de letra perfecto para la web

Como punto de partida podemos tener en cuenta el famoso estudio que concluía que si tu texto era menor a 16 px de alto estabas perdiendo dinero. 16 píxeles no es un tamaño grande, de hecho es el tamaño por defecto en muchos navegadores. Puede parecernos grande en un primer momento pero en cuanto lees un par de artículos a este tamaño empiezas a darte cuenta de lo cómodo que resulta.

Es importante no perder de vista el concepto de que tus lectores son tus clientes. Necesitas tener lectores a los que vender tus productos o servicios. Si tuvieras una tienda física te gustaría crear un ambiente agradable para que tus visitantes hicieran aquello que quieres que hagan (comprar un producto, contratar un servicio, darte sus datos…). En tu web consigues esto proporcionando la mejor experiencia posible. ¿Y sabes qué hacen tus potenciales en tu web? Principalmente leer.

La legibilidad es el aspecto crítico en lo que se refiere a que la experiencia de ese usuario en tu sitio sea satisfactoria. Si difundes tu mensaje en textos de 12 píxeles estás minando esta experiencia (a menos que tus clientes sean superhéroes con vista sobrehumana).

No es exagerado, entonces, pensar que la legibilidad es un factor clave en los beneficios que puedes generar con tu sitio web.

Número de palabras por línea

Hay otro factor decisivo en el proceso de definir el texto: el ancho de línea. Según John Kane en su Manual de tipografía, el ancho de línea óptimo contiene entre 35 y 65 caracteres (7-12 palabras aproximadamente). Aunque estas indicaciones fueron sugeridas para papel en un principio, sirven también para tener una legibilidad óptima en pantalla.

Toca tirar de calculadora, definir un ancho para la caja de texto y contar cuántos caracteres entran en función del tamaño. Con estas variables podemos jugar hasta que estemos contentos con el ancho de línea y el cuerpo del texto.

Hace ya unos años hice este video con el proceso de trabajo de tipografía para web

El interlineado

En la web tenemos la propiedad alto de línea (line-height) que es la distancia entre dos líneas (no es exactamente lo mismo que el interlineado). Como norma general una buena recomendación es establecer este espacio en torno al 120% del tamaño del texto. No obstante, como casi siempre que trabajamos con letras, tenemos que darle más importancia al aspecto visual, la apariencia óptica, que a los números y a las matemáticas.

Si nos pasamos de interlineado será muy difícil crear continuidad, el lector tendrá que hacer un esfuerzo extra para ir de una línea a la siguiente y podrá perderse. Si nos quedamos cortos será una pesadilla decidir cuál es la línea que debemos leer a continuación.
Debes separarnos de la pantalla y ver el dibujo, la mancha que hace la caja de texto.

Tipografía web responsive

Todas estas pautas que he mencionado van en la línea de conseguir una experiencia de lectura en pantalla similar a la que tenemos al leer un libro. El tamaño del texto en un libro es menor que los 16 píxeles que he mencionado arriba, lo sé. Pero al leer un libro lo cierto es que tienes el texto bastante más cerca de los ojos que cuando lees en una pantalla de ordenador en escritorio.

Para manenter la metáfora de lectura debes hacer algunos ajustes de tipografía web responsive. El lector que accede a tu sitio con su smartphone tiene los ojos físicamente más cerca del texto que cuando lee sentado en el ordenador. Esto es algo que debes tener en cuenta y reducir ligeramente el cuerpo del texto corrido para estas pantallas.

De esta manera, si sigues un enfoque mobile first, empezarás por definir el tamaño del texto y el interlineado para pantallas pequeñas que el lector sitúa más cerca de su vista. Al aumentar el tamaño de pantalla y la distancia del texto necesitarás aumentar el texto, el ancho de línea y ajustar el interlineado.

Si escribes SASS te puede interesar un post que publiqué hace unas semanas comentando dónde ubicar las media queries. Ahí mismo encontrarás un mixin (una especie de función de SASS) útil para gestionar los diferentes puntos en los que modificar el cuerpo del texto.

Una vez más debes poner en juego las variables tamaño del texto, ancho de línea e interlineado. Cuando cambias un valor debes modificar el resto para mantener la armonía. Y, lamentablemente, no es una cuestión de proporciones simplemente. Debemos volver a fiarnos más de lo que vemos que de los números (aunque estos son siempre un buen punto de partida).

La tipografía es un campo apasionante y uno de los pilares fundamentales del diseño. También lo es en la web. Aplicarla correctamente es imprescindible para conseguir que un sitio web consiga los objetivos que pretendemos.

PD: Desde que publiqué este artículo han aparecido varios libros muy interesantes sobre la materia. No puedo dejar de recomendar el de Daniel Rodríguez: «Manual de tipografía digital».

Nota: Este artículo es parte del primer correo que envié a los suscriptores de la newsletter. Publico temas diferentes en ambos canales. Si te interesan estos contenidos puedes suscribirte dejando tu correo en la caja que tienes más abajo.

¿Te ha gustado el post? Puedes seguirme en Twitter o en Facebook donde seguimos hablando de estrategia de contenidos y marketing digital