Aún así, muchos diseñadores web descuidan la importancia de la tipografía en la web. Hasta ahora, solo he conocido a unos pocos que realmente entienden la tipografía y saben cómo aplicar ese conocimiento a su trabajo. Y el desconocimiento de la tipografía no proviene del desconocimiento. Aprendí que los diseñadores web suelen ser autodidactas y aún no han comprendido la importancia de la tipografía, o que en realidad estudiaron diseño, pero la tipografía era solo una de las clases a las que tenían que asistir.
Creé el curso Better Web Type para ayudar a crear conciencia sobre el importante papel que juega la tipografía en la web. En mi opinión, tanto los diseñadores web como los desarrolladores web deberían aprender los conceptos básicos: si un diseñador usa ligaduras en sus diseños, pero el desarrollador ni siquiera sabe qué son las ligaduras, ¿cómo podemos esperar que transforme correctamente la tipografía más bellamente diseñada en código? ? Con ambos roles conociendo los conceptos básicos, podremos comenzar a contribuir a una mejor web produciendo una mejor tipografía web. Juntos.
Una de las cosas más importantes de la tipografía es dar forma a una experiencia de lectura fluida que invite al lector y presente el contenido de una manera objetiva. Para hacer eso, necesitamos poder dar forma a párrafos perfectos. Hay tres claves para hacer eso, como dijo Josef Mueller-Brockmann, un reconocido tipógrafo y comunicador visual del siglo XX:
El lector debe poder leer el mensaje de un texto de forma fácil y cómoda. Esto depende en gran medida del tamaño del tipo, la longitud de las líneas y el interlineado (altura de la línea).
—Josef Mueller – Brockmann
Cuando estaba escribiendo las lecciones para el curso Better Web Type, estaba tratando de pensar en un concepto simple que ilustraría exactamente eso: font-size, line-height, y la longitud de las líneas debe estar en perfecto equilibrio. Luché durante un tiempo, pero luego, de la nada, me golpeó: el triángulo equilátero. Los tres lados de un triángulo equilátero son iguales y también lo son los tres ángulos. Una gran representación de tres cosas en perfecto equilibrio. Resultó que era fácil aplicar esta idea a las tres claves que dan forma a un párrafo perfecto. Pero primero, echemos un vistazo a cada uno de ellos de forma aislada.
Tipo de tamaño y color
Uno de los errores que cometen la mayoría de los sitios web es que hacen que el texto principal sea demasiado pequeño. A principios de la década de 2000, era una práctica común establecer el texto del cuerpo en un tamaño de alrededor de 11 px. Pero en ese entonces las pantallas eran más pequeñas con resoluciones de pantalla más bajas. 11px entonces era más grande de lo que es ahora.
Una regla común para configurar el texto del cuerpo es configurarlo en un tamaño que coincida con el tamaño del texto en un libro a una distancia de un brazo.
Hacer coincidir el tamaño de la fuente con el tamaño del texto de un libro a la distancia de un brazo. (Fuente: iA)
El tamaño recomendado para las pantallas actuales es de 16 px para dispositivos móviles y de 18 a 22 px para computadoras de escritorio. Esto también depende del tipo de letra. Algunos tipos de letra configurados en 16px pueden parecer más grandes que otros, como se ve claramente en la imagen de abajo.
El mismo texto ambientado en Merriweather parece más grande y pesado que cuando está ambientado en Georgia.
“Tipo de color” en la tipografía no significa colores reales como rojo, azul o verde. El color del texto significa qué aspecto tiene el tipo de letra negra densa sobre un fondo claro. Un tipo de letra del mismo tamaño y peso puede parecer más pesado que otro. El contraste del tipo de letra Merriweather en el ejemplo anterior es menor (comparando las serifas y diferentes tallos) que el de Georgia a la derecha. Eso hace que parezca más pesado y el color del tipo es más oscuro.
Longitud de las líneas
Leer líneas de texto muy largas es agotador para la vista. Nuestros ojos necesitan pausas constantes que son proporcionadas por saltos de línea. En ese caso de cambiar a la siguiente línea, obtienen esa breve pausa. Cortos, pero lo suficientemente largos como para que sigan funcionando durante más tiempo. Es como un motor que no funciona a plena potencia todo el tiempo, por lo que sigue funcionando durante más tiempo sin sobrecalentarse.
La longitud ideal de una línea de texto es de 45 a 75 caracteres, incluidos los espacios. Cualquier cosa que llegue lejos de ese rango se vuelve difícil de leer. Demasiado cambio de línea cuando las líneas son demasiado cortas y muy pocas interrupciones para los ojos cuando son demasiado largas.
Longitud de línea recomendada en las Pautas de diseño de materiales de Google (Fuente: material.io)
Altura de línea (líder)
La altura de la línea, o interlineado, como se le suele llamar en forma impresa, es el pilar del ritmo vertical en la tipografía. Comprender cómo funciona es clave para producir una mejor tipografía para la web.
La altura de línea (interlineado) funciona de manera diferente en la web. Se distribuye uniformemente por debajo y por encima de la línea de texto.
Demasiados diseñadores o desarrolladores web que he conocido piensan en line-height como una característica de texto aislado. Por eso, tienden a establecerlo basándose en lo que parece correcto. Como consecuencia, line-height es algo que se establece sin demasiada consideración. Pero line-height es demasiado importante para establecerlo de forma tan descuidada. La longitud de las líneas afecta al line-height. Cuanto más largas sean las líneas, más espacio se requiere entre ellas. El tamaño de la letra afecta al line-height. Cuanto más grande sea, mayor será la altura de la línea.
El color del tipo afecta line-height también. Los tipos más oscuros y pesados requieren más espacio entre las líneas. Y al final, el tipo de letra en sí también puede afectarlo. Como hemos visto anteriormente, algunos tipos de letra parecen más grandes que otros. Algunos, en su mayoría tipos de letra serif, parecerán más pesados. Esos también requerirán más espacio entre las líneas.
Ahora que lo sabes line-height es muy importante y que nunca debe considerarse como una característica aislada, veamos las mejores prácticas generales. Para párrafos, ideal line-height suele estar entre 1,3 y 1,7. Por lo tanto, un cuerpo de texto establecido en 16 px debe tener una altura de línea de 21 a 26 px. Esto dependerá de las cosas mencionadas anteriormente: diseño de la tipografía, tamaño de la tipografía, peso, etc.
Mismo tipo de letra, mismo font-size, color diferente. El texto más oscuro debería ser más grande line-height.
Mismo tipo de letra, mismo tamaño de fuente, mismo color, diferente longitud de línea. Cuanto más larga sea la línea de texto, mayor será la altura de línea requerida.
Diferentes tipos de letra, mismo tamaño de fuente, mismo color. Los tipos de letra que parecen más grandes y pesados necesitan más altura de línea.
El triángulo equilátero
Existen algunas mejores prácticas generales en tipografía, pero nunca son definitivas. Como vimos con la altura de línea, comúnmente se nos presentan rangos que deberíamos usar. Se necesita tiempo para aprender qué elegir de ese rango. El ojo necesita tiempo para ser más agudo al notar estas diferencias.
Y así llegamos a lo que llamo El triángulo equilátero de un párrafo perfecto. Hemos analizado el tamaño, la medida y la altura de la línea de forma aislada (tanto como pudimos). Al hacerlo, ya aprendimos que estas propiedades están interconectadas. No pueden considerarse de forma aislada y nunca deberían serlo. Es por eso que un triángulo equilátero es una representación perfecta de un párrafo de texto bien diseñado. Para ello, necesitamos un buen tamaño de letra que coincida con la medida, que coincida con la altura de la línea. Si uno de ellos se equivoca, su triángulo se desviará.
Desafortunadamente, no puedo darte números definidos de un párrafo perfecto, ya que existen millones de combinaciones. Pero puedo darte algunos ejemplos que te ayudarán a entrenar tu ojo. Trate de prestar atención a los detalles y compare el tamaño de la letra, la longitud de las líneas y el espacio entre ellas.
Un párrafo perfectamente equilibrado representado por un triángulo equilátero.
En el ejemplo anterior, el texto está configurado en Merriweather, una tipografía extraordinariamente grande y pesada. Por eso está configurado en 14px. El line-height está, por tanto, más cerca del límite superior del rango recomendado de 1,3 a 1,7. El párrafo anterior se ajusta perfectamente a 55 caracteres por línea (también en el rango recomendado).
Las líneas de texto de este párrafo son demasiado largas. El triángulo no es equilátero. Para solucionar esto, tendríamos que aumentar el tamaño de la letra y la altura de la línea o disminuir la longitud de la línea.
En el ejemplo anterior, la longitud de las líneas está fuera del rango recomendado de 55 a 75. Es 84 en promedio, lo que significa que el lado inferior del triángulo se expande en ambos lados. El triángulo ya no es equilátero.
El line-height de este párrafo es demasiado extenso. Las líneas de texto comienzan a separarse. Este ejemplo podría mejorarse si aumentamos la longitud de las líneas. Para solucionarlo correctamente, también necesitaríamos aumentar el tamaño de la fuente para equilibrarlo. Una forma más sencilla de solucionarlo sería reducir la altura de la línea.
El line-height en el ejemplo anterior es obviamente demasiado grande. Está configurado en 2 y muy fuera del rango recomendado. Las líneas de texto están demasiado separadas. Desafortunadamente, esto sucede con demasiada frecuencia en la web. Parece que hay una tendencia de configurar el tipo a un color gris claro y aplicar una gran altura de línea encima. Es un intento de conseguir ese estilo limpio y minimalista, pero está mal. Textos como ese, especialmente si son largos, son difíciles de leer.
El font-size es demasiado grande en este párrafo. Fuerza la longitud de las líneas a 30 caracteres y sesga completamente el triángulo. Las líneas de texto están demasiado juntas. Para solucionar esto, tendríamos que disminuir el tamaño del texto o aumentar tanto la altura de la línea como la longitud de las líneas.
Afortunadamente, no encuentro esto en la web con demasiada frecuencia. Todavía quería incluirlo, por lo que cubrimos todas las opciones posibles que pueden surgir de este concepto. El tamaño de fuente en el ejemplo anterior es demasiado grande para la altura de línea y la longitud de las líneas dadas. Los textos configurados como este son extremadamente difíciles de leer.
El juego de aprendizaje
Muchos de los estudiantes del curso Better Web Type me han pedido que profundice en este concepto. ¿Y cuál es la mejor manera de ilustrar cómo funciona este concepto en acción? Un juego de aprendizaje que te ayudará a agudizar tus ojos. Presentando “El triángulo equilátero de un párrafo perfecto – Un juego de aprendizaje de tipografía web”.
El juego consta de diez niveles, cada uno de los cuales te pide que establezcas una de las tres propiedades: tamaño de fuente, altura de línea o longitud de las líneas. Al final, obtienes una puntuación de 100 y la oportunidad de participar en el sorteo del próximo libro Better Web Typography for a Better Web. Cuatro, elegidos al azar, los puntajes más altos obtendrán un libro gratis, que se basa en el popular curso Better Web Type.
Espero que tanta gente como sea posible se encuentre con este juego y aprenda que line-height, font-size, y la longitud de las líneas siempre deben considerarse juntas. Intenta obtener el mejor resultado y desafía a tus amigos. Cuanta más gente sepa sobre esto, mejor será la tipografía web.
Mira el juego