Introducción a la tipografía web

En su clásico The Elements of Typographic Style, Robert Bringhurst define la tipografía como «el oficio de dotar al lenguaje humano de una forma visual duradera». En la mayoría de los casos, esa forma visual debe ser legible y fácil de leer, además de transmitir el tono adecuado. Si tu tipografía hace que un texto sea difícil o directamente imposible de leer, entonces no sirve de nada, por muy increíble que parezca.

Solo imagina lo diferente que podría ser la historia si la Biblia, por ejemplo, se hubiera compuesto en Indie Flower verde sobre un fondo azul:

No estoy seguro de que la gente se la hubiera tomado tan en serio.

Lo que nos lleva a tres conceptos clave en tipografía: tono, legibilidad y facilidad de lectura.

El tono es el ambiente o la sensación que tu tipografía transmite visualmente, algo distinto al tono del contenido en sí. El tono abarca un espectro que va de lo informal a lo formal, y querrás asegurarte de que tu tipografía establezca el tono adecuado para el mensaje y la marca. La composición anterior lo ilustra a la perfección: el aire joven y divertido de la fuente simplemente no puede sostener la gravedad de la cita.

La legibilidad define lo fácil que es distinguir entre las formas de las letras individuales (el diseño de los caracteres) y es una consideración vital al configurar la tipografía en interfaces de usuario. Por ejemplo, algunas fuentes dificultan distinguir entre una I mayúscula y una l minúscula. (¿Ves a lo que me refiero?) Esto suele ser una función del diseño de la fuente, aunque ciertas decisiones de diseño, como ajustar el espaciado entre letras demasiado alto o bajo, o escribir todo en mayúsculas, pueden afectar la legibilidad.

La facilidad de lectura define lo sencillo que resulta leer el contenido de un párrafo. Está determinada por el diseño de la fuente y por tus propias decisiones de diseño, incluyendo el tamaño, el espaciado y el color.

Cubriré todos estos aspectos con más detalle, pero empecemos por una de las decisiones más importantes: las fuentes en sí.

Los muchos tipos de fuentes

Los tipógrafos clasifican las fuentes de muchas maneras diferentes, pero las siguientes categorías son las más comunes en el mundo de la tipografía web:

Serifa – El rey indiscutible del contenido impreso, las fuentes con serifa presentan pequeñas líneas llamadas «serifas» en los extremos (o «terminales») de cada letra. Ejemplos: Times New Roman, Georgia, Droid Serif

Sans Serif – Como su nombre indica, las fuentes sans serif carecen de serifas. Se han convertido en el estándar para la web porque las primeras pantallas de computadora tenían dificultades para renderizar las serifas con nitidez. Ejemplos: Arial, Verdana, Droid Sans

Monoespaciada – Cada carácter en una fuente monoespaciada ocupa el mismo ancho. Creadas cuando las máquinas de escribir estaban de moda, estas fuentes han experimentado un renacimiento debido a su uso en editores de texto. Ejemplo: Inconsolata

Cursiva – Las fuentes cursivas imitan la escritura a mano. Tienden a enfatizar el interés visual sobre la legibilidad, lo que las hace más adecuadas para títulos y encabezados que para el cuerpo de texto. Ejemplos: Indie Flower, Great Vibes

Display – Las fuentes display tienden a ser grandes y llamativas o extremadamente finas, y a menudo tienen formas de letras muy complejas. Debido a su impacto para captar la atención, se utilizan mejor en titulares. Ejemplo: Changa One

La gran mayoría de las fuentes que ves en libros, documentos y páginas web son serifa o sans serif. (Como esta publicación es solo una introducción a la tipografía, nos centraremos en estas dos).

¿Serifa o no serifa?

Si las fuentes con y sin remates (serif y sans serif) son las opciones estándar, ¿cómo decidir entre ambas? La respuesta, como suele ocurrir en el mundo del diseño, es: depende.

Mucha gente cree que los remates mejoran la legibilidad en materiales impresos, pero en el mundo digital tienen fama de arruinarla debido a la baja resolución de las pantallas antiguas. Con la llegada de las pantallas retina y 4K, esto ya no es una gran preocupación, pero si tu audiencia usa una gran variedad de dispositivos para ver tu sitio, quizás sea mejor ir a lo seguro y usar una fuente sin remates para el cuerpo del texto.

No me malinterpretes. Las fuentes con remates siguen siendo relevantes en la web, pero funcionan mejor en títulos y otros bloques de texto cortos y grandes. Debido a su apariencia más ornamentada, los remates pueden darle un tono más formal y profesional a tus diseños, lo que los hace ideales para ciertas marcas.

Por ejemplo, los medios de noticias y los blogs profesionales suelen usar fuentes con remates para el cuerpo del texto. Esto es especialmente interesante para los sitios de periódicos, donde estas fuentes mantienen el aspecto y la sensación de un diario. Muchos también sostienen que las fuentes con remates son mejores para lecturas largas, aunque eso podría ser más una cuestión de costumbre que un hecho científico.

Resumen: Inclínate por fuentes sin remates para el cuerpo del texto para maximizar la legibilidad y considera usar fuentes con remates para títulos y contenido breve. Pero ten en cuenta que una fuente con remates podría ser justo lo que tu marca o sector necesita.

Cada fuente tiene su propia voz

Cada fuente tiene su propio tono, ya sea profesional, divertido, clásico o agresivo. Eso significa que usar la fuente equivocada en el lugar incorrecto puede dar resultados absurdos:

La Constitución de los EE. UU. se ve ridícula cuando se escribe con una fuente de tono tan informal como Comic Sans. ¡Simplemente no tiene sentido para un documento tan serio!

Por supuesto, no hay un conjunto específico de características que determine el tono de una fuente. Es más bien una sensación que te transmite al verla o leerla. Por eso, lo mejor es empezar tus exploraciones tipográficas con unas pocas opciones distintas y probar cada una en contexto. Para cada muestra, pregúntate: ¿esta fuente transmite el tono que busco? ¿Ese tono encaja con el contenido y el medio? También es buena idea probarlas con amigos, colegas y personas de tu público objetivo.

Resumen: Confía en tu ojo y adapta el tono al contenido. Pide a otros que vean la fuente en contexto y te digan qué tono les transmite. Sus respuestas podrían sorprenderte.

Haciendo de celestina: creando la combinación de fuentes perfecta

Cuando usas más de una fuente en una página, debes considerar cómo combinan. Algunas fuentes simplemente chocan, mientras que otras parecen haber sido hechas la una para la otra (y a veces, literalmente, lo fueron).

Para saber más sobre combinaciones de fuentes, echa un vistazo a cómo elegir la mejor fuente para tu sitio. Si no, experimenta con algunas combinaciones diferentes en tus diseños y mira cómo quedan juntas. Typegenius puede ser muy útil para esto.

Consejos profesionales: Ten cuidado al mezclar fuentes con y sin remates a menos que tengas mucha confianza en tus habilidades de combinación, ya que pueden chocar fácilmente. También querrás evitar combinar dos fuentes del mismo tipo (es decir, dos sin remates o dos con remates), ya que a menudo son demasiado similares para distinguirlas fácilmente.

Solo no te dejes llevar demasiado con tus intentos de combinación: limítate a un máximo de tres fuentes diferentes en tus diseños. Cualquier cantidad superior suele verse recargada y puede confundir a los usuarios sobre tu jerarquía visual.

Recursos tipográficos útiles

Lugares donde encontrar fuentes

Typekit – Este servicio aloja y ofrece una vasta colección de fuentes premium para sitios web. Y son fáciles de integrar en Webflow.

Google Web Fonts – Esta enorme colección de fuentes gratuitas incluye su buena dosis de mediocridad, pero también presume de algunas joyas hermosas y flexibles, como Open Sans y Alegreya.

Behance y Dribbble – Muchos diseñadores crean y comparten sus propias fuentes increíbles para que las descargues gratis.

Lugares para encontrar inspiración tipográfica

Typewolf

Sitios de tipografía seleccionados por Awwwards

Hello Happy – Beautiful Web Type

Cuentos seleccionados de las Fábulas de Esopo con tipografía seleccionada de Google Fonts

FontPair – Una herramienta fantástica para probar tus combinaciones de fuentes

Sobre el contraste

Por razones obvias, el contraste entre el texto y su fondo es fundamental para la legibilidad.

Pero quizás te sorprenda saber que la mejor combinación de colores para la legibilidad es texto gris oscuro sobre un fondo gris claro, no negro puro (#000) sobre blanco puro (#fff). Esto se debe a que el texto negro sobre un fondo blanco intenso provoca un ligero desenfoque y sangrado de color debido a las propiedades reflectantes y absorbentes de los colores. Y, seamos sinceros, el blanco puro puede cansar la vista después de un rato.

Aunque es tentador, intenta evitar poner texto claro sobre un fondo oscuro en párrafos largos. El texto claro refleja la luz, lo que hace que se desenfoque ligeramente, mientras que el texto negro absorbe la luz, lo que lo hace más nítido.

Si insistes en poner texto claro sobre un fondo oscuro, o si estás mostrando texto sobre una imagen, haz que el fondo sea lo más oscuro posible y considera añadir una ligera sombra al texto para que resalte. Y mantén esos párrafos cortos para limitar la fatiga visual.

Resumen: Para párrafos largos de texto, usa tipografía oscura sobre un fondo claro—preferiblemente gris oscuro sobre gris claro. Si vas a mostrar texto sobre un color o una imagen, haz que el fondo sea lo más oscuro posible y considera añadir una sombra sutil al texto.

Vigila la longitud de línea

La longitud de línea mide el número de caracteres por línea de texto. A medida que los monitores de escritorio alcanzan tamaños de 30 pulgadas o más, esto se ha convertido en una preocupación creciente.

¿Qué longitud es demasiado larga? ¿Sería cómodo leer un libro que abarcara todo el ancho de la pantalla de tu portátil o monitor de escritorio? Yo creo que no. Tampoco sería cómodo leer un libro que tuviera el ancho de un marcapáginas.

En general, limita la longitud de tus líneas a 45–60 caracteres por línea—aunque muchos tipógrafos consideran aceptable hasta 80 caracteres por línea. Si es menos, tus lectores se cansarán de saltar de un lado a otro entre líneas. Si es más, el lector podría perderse al pasar del final de una línea al principio de la siguiente.

Como referencia, Arial configurada a 11px en Google Docs tiene unos 80 caracteres por línea, al igual que el cuerpo de texto de este artículo.

Mantener la legibilidad en diferentes tamaños de dispositivo requiere encontrar un equilibrio entre el tamaño de la fuente y la longitud de la línea. Cuanto más grande sea la fuente, menos caracteres por línea tendrás. En dispositivos pequeños, esto podría resultar en muy pocos caracteres por línea.

Resumen: Intenta que la longitud de la línea sea de 45 a 80 caracteres. Eso equivale a unos 30em si trabajas en un diseño adaptable.

Cuida el grosor de tu fuente

El grosor de la fuente define la intensidad (o negrita) de cada letra. El grosor predeterminado es 400, mientras que la negrita es 700. Muchas fuentes tienen grosores que van de 100 a 900 en incrementos de 100, donde 100 es muy fino y 900 es muy grueso.

Resumen: Usa un grosor más marcado para enfatizar o dar dramatismo a ciertos pasajes, y evita usar grosores finos fuera de configuraciones de pantalla grande. Para el diseño web, elige los grosores con cuidado: cargar los nueve grosores de Exo 2 podría ralentizar mucho tus páginas.

Usa las unidades correctas

En aplicaciones impresas, la gente suele hablar de tamaños de fuente en "puntos", pero en la web tendemos a usar el píxel (px). Es un concepto similar.

Sin embargo, con los diseños adaptables, lo mejor es establecer todas las propiedades de tamaño y espaciado usando unidades relativas como ems y porcentajes, en lugar de unidades absolutas como los píxeles.

Un em es una unidad de medida relativa equivalente al tamaño de fuente actual del elemento HTML en cuestión (el valor predeterminado es 16px para párrafos). Por lo tanto, 2em sería el doble de ese tamaño (32px para un párrafo estándar).

¿Por qué? Por dos razones: primero, las necesidades de espaciado cambian a medida que cambia el tamaño de la fuente. Una altura de línea de 24px puede verse genial cuando la fuente es de 16px, pero con 32px de altura, ese espacio se vería demasiado apretado:

Segundo, las unidades relativas facilitan el diseño adaptable (ajustar el diseño y el estilo para adaptarse a varios dispositivos). Si diseñas todo en relación con el tamaño de fuente base, puedes cambiar ese tamaño base más adelante y el resto de tu sitio se ajustará automáticamente, ahorrándote mucho trabajo manual.

Y sin duda tendrás que hacer ajustes, ya que los tamaños en píxeles varían enormemente entre dispositivos. Por ejemplo, un iPhone puede mostrar una fuente de 16px a aproximadamente el 60% del tamaño de una fuente de 16px en un Macbook, lo que dificulta mucho la lectura.

Uso de espacios en blanco en la tipografía web

Un espaciado adecuado hace que el contenido sea mucho más fácil de leer. Un espaciado insuficiente puede hacer que las líneas, letras o palabras se mezclen, creando una sensación de agobio. Los tres tipos de espaciado que debes tener en cuenta para maximizar la legibilidad son el espaciado entre letras (tracking), la altura de línea (interlineado) y el espaciado entre palabras (que no tiene un término elegante).

Espaciado entre letras (tracking)

El espaciado entre letras (o tracking, en diseño impreso) define la distancia entre cada letra de una palabra y puede aumentar o disminuir la legibilidad del texto. Ten en cuenta que el tracking (espaciado entre letras) es distinto al kerning: el tracking establece una distancia uniforme entre todas las letras, mientras que el kerning permite un espaciado personalizado entre letras específicas.

Resumen: Por lo general, el valor predeterminado es el correcto: representa lo que el diseñador de la tipografía consideró como el espaciado ideal. Sin embargo, cuando escribes en mayúsculas sostenidas, lo cual reduce la legibilidad, es posible que necesites añadir tracking para ayudar a los lectores a distinguir mejor cada letra.

Espaciado entre palabras

El espaciado entre palabras determina la distancia entre las palabras de una oración. El mejor espaciado es aquel que distingue claramente cada palabra sin obligar a la vista a recorrer demasiado espacio entre ellas.

Resumen: Normalmente no necesitarás ajustar el espaciado entre palabras, a menos que notes que, en tamaños grandes, las palabras parecen estar demasiado juntas.

Aprovecha al máximo el interlineado

El interlineado (leading, en diseño impreso) define el espacio vertical entre cada línea de texto y se mide de línea base a línea base (la línea roja en las imágenes de abajo), ignorando los trazos ascendentes y descendentes.

Un interlineado insuficiente no solo resulta claustrofóbico, sino que puede hacer que leas la misma línea una y otra vez. A todos nos ha pasado. Por el contrario, un interlineado excesivo puede hacer que el contenido parezca inconexo.

Resumen: Una buena regla general es ajustar el interlineado a cerca de 1.5em (o 1.5 veces el tamaño del cuerpo de texto). Para mantener el ritmo vertical, el espaciado entre párrafos (margen inferior) debe coincidir con el interlineado.

El tamaño importa

El tamaño de la fuente transmite importancia relativa, crea dramatismo y juega un papel fundamental en la legibilidad.

Las cosas grandes atraen más nuestra atención que las pequeñas, especialmente cuando son más grandes de lo esperado. Un pastor alemán de tamaño normal no llamará tu atención, pero ¿un pastor alemán del tamaño de un poni? Eso lo estarías subiendo a Instagram en un abrir y cerrar de ojos.

Señala importancia

También le asignamos más importancia a las cosas más grandes. Los encabezados casi siempre son más grandes que los párrafos del cuerpo de texto, que a su vez son más grandes que las notas al pie. Las diferencias de tamaño nos ayudan a decidir en qué enfocarnos y qué ignorar.

Añade dramatismo (del bueno)

El tamaño también puede usarse para crear impacto y dramatismo. Una línea de texto en mayúsculas, con letras altas y negritas que ocupan toda la página, puede hacer una declaración mucho más potente que una escrita en minúsculas, cursiva y pequeña.

Resumen: Si quieres dirigir la mirada hacia un elemento, hazlo notablemente más grande. Es por esto que las llamadas a la acción (CTA), como los cuadros de suscripción por correo, los botones de "comprar ahora" y los titulares, suelen ser mucho más grandes que el resto de los elementos de la página.

Mejora la legibilidad

¿Alguna vez has intentado leer un libro con una fuente de 6 puntos? Yo sí. Fue El Señor de los Anillos: El retorno del Rey. Me dejó la vista hecha polvo y era imposible de leer si no había una luz perfecta. Por suerte, tenía 20 años y no necesitaba gafas, pero imagina lo que habría sido para tu abuela y sus bifocales.

El tamaño de fuente predeterminado para párrafos en la web es de 16px, pero los tamaños más comunes en internet son 12px, 13px y 14px. Recomiendo no bajar nunca de 14px para el cuerpo de texto, ya que cualquier tamaño menor puede dificultar la lectura.

Nota: Como regla general, ajusta tu encabezado principal (H1) al doble del tamaño de tu fuente de cuerpo. Para el resto de tus encabezados (H2 en adelante), reduce el tamaño aproximadamente un 25% por nivel. Así, si tu cuerpo de texto es de 16px, tu H1 sería de 32px, tu H2 de 24px, etc. Modular Scale de Tim Brown es una herramienta súper útil para crear jerarquías tipográficas con un poco más de rigor matemático.

Ahora que conoces los fundamentos de la tipografía...

Hay mucho más en lo que profundizar, especialmente cuando se trata del mundo de las fuentes. Aquí tienes algunos recursos útiles para aprender más sobre tipografía:

- Hack Design – Este curso detallado cubre casi todo lo relacionado con el diseño web, incluida la tipografía.

- Tuts+ – Un excelente curso de diseño web centrado en la tipografía.

- Design for Hackers – Este es un gran libro de introducción al diseño, con un punto de vista analítico y una sección fantástica sobre tipografía.

¡Ahora sal ahí fuera y haz que la tipografía de Internet sea algo digno de admirar!

¿Tienes algún buen ejemplo de tipografía bien hecha? ¿O alguna pregunta sobre el arte de la tipografía? Compártelos en los comentarios de abajo y prometo dar mi opinión.