El siguiente articulo es una traducción de un estudio sobre las tendencias en diseño web en relación con los patrones y prácticas tipográficas actuales (2013): Typographic Design Patterns And Current Practices (2013 Edition)

Escrito por Jan Constantin (Smashing Magazine)

La buena tipografía siempre ha sido un aspecto que define el diseño web de forma eficaz, y esto es especialmente cierto para los sitios web en los que se hace hincapié en la presentación de una gran cantidad de contenidos – en concreto, artículos, noticias y/o historias en general. Ya sea para una revista o un periódico internacional el diseñador de un sitio web de este tipo de publicaciones (que distribuyen una gran cantidad de contenidos) siempre debe considerar seriamente el detalle de la tipografía. Cuál es la verdadera impresión que se quiere dar con la misma.

SOBRE EL ESTUDIO

En 2009, se realizó un estudio sobre las prácticas tipográficas vigentes en ese momento. Desde entonces, las técnicas que responden al diseño responsivo han ganado gran impulso y han establecido «su lugar» en el panorama del diseño con CSS (diseño con hoja de estilo).

Con el advenimiento de la nueva generación de teléfonos celulares (smartphones), han surgido nuevos modos de explorar la web y leer los textos y/o contenidos de las páginas web. Las publicaciones en línea han tenido que reevaluar cómo presentar su contenido en los dispositivos móviles. Nunca antes la tipografía web había sido tan rica, versátil y accesible. Sin embargo, con las nuevas oportunidades de introducir complejidad en las tipografías, los nuevos desafíos se encuentran en dicha implementación. Por ende actualmente, todos estamos impulsados a reconsiderar nuestras prácticas.

Tres años más tarde del primer estudio, hemos revisado la investigación original y exploramos cómo la tipografía web ha cambiado en los últimos años. Pasamos horas y horas entre febrero y abril de este año para recoger nuevos datos y explorar las novedades y tendencias más comunes en la tipografía web actual.

¿CÓMO LLEGAMOS A REALIZAR EL ESTUDIO?

Hemos recopilado los datos relevantes de más de 50 sitios web respetados para abordar estas cuestiones. Para este estudio, hemos seleccionado una amplia variedad de periódicos internacionales, revistas y blogs muy consultados, cuyas elecciones tipográficas debieron ser pensadas a fondo. Elegimos publicaciones y organizaciones que tienen un gran número de lectores como The Boston Globe y The Financial Times. Tambien, revistas especializadas con menor cantidad de visitas pero que a menudo poseen lectores más exigentes como A List Apart y UX Booth.

Estos sitios web centran su contenido basandose principalmente en el texto, y no en entornos genéricos como Instapaper y Readability. Por lo tanto, tienen que ser muy legibles a fin de garantizar que los usuarios sigan visitandolos y leyendo sus publicaciones.

Debido a que la legibilidad de los contenidos es (o más bien debería ser) el principal objetivo del diseño de estas publicaciones; las técnicas que siguen podrían ser consideradas buenas prácticas. Sin embargo, los resultados presentados en este estudio deben tomarse como una contribución más al buen diseño web.

CUESTIONES EN LAS QUE ESTABAMOS INTERESADOS

Las hipotesis que planteamos en nuestro primer estudio, hace casi cuatro años, siguen siendo relevantes pero necesitan complementarse con preguntas acerca de los retos que impusieron los dispositivos móviles. El diseño responsivo que ha sido ampliamente adoptado por las publicaciones online propuso nuevos interrogantes; ¿Sirve en todos los casos el diseño responsivo? ¿Ha habido algún cambio en las opciones tipográficas de las grandes publicaciones y  en las pequeñas? ¿Cuán grande debe ser la fuente tipográfica para los dispositivos móviles? ¿Qué tan grande será el tamaño de la fuente del cuerpo texto (body) y el contenido en general? ¿Cómo cambiar el tamaño de la fuente en un sitio web responsivo? Optimizar la legibilidad puede requerir cambiar el estilo de fuente, el tamaño y el espacio entre las letras de acuerdo con el ancho y la altura del diseño, siempre dependiendo del visor (pantalla de pc, smartphone, tablet, etc.)

El segundo artículo de esta serie abordará la creciente diversidad de lectores de libros electrónicos y aplicaciones móviles, cuyo propósito es dar a los usuarios un ámbito más agradable, mejor y/o mayor experiencia de lectura. Este estudio intenta abarcar desde los lectores de escritorio (PC) hasta los lectores de teléfonos inteligentes. Teníamos curiosidad acerca de los detalles del diseño y las opciones tipográficas que hacen que la lectura de artículos en las nuevas aplicaciones web sean más “agradables” que leer en las páginas web originales.

Nota: Por razones de continuidad, no nos hemos alejado demasiado del formato del estudio original realizado en 2009. Este artículo tiene la intención de actualizar los datos, pero es de esperar detectar nuevas tendencias y llegar a nuevas conclusiones.

LA TIPOGRAFÍA EN PUBLICACIONES EN LÍNEA

Después de un cuidadoso análisis de las hojas de estilo (CSS) de las publicaciones online, diarios y revistas más visitadas, hemos recopilado en una hoja de cálculo con los datos más importantes y los puntos más pertinentes referidos a las tipografías. Haciendo click aquí (Estudio de los casos prácticos) se puede ver la hoja de cálculo con los datos en bruto (datos que son necesarios para este artículo).

No nos limitaremos a las preguntas del estudio original, vamos a abordar las cuestiones que han surgido desde entonces, como resultado de las técnicas del diseño responsivo, y vamos a examinar si tales técnicas se están aplicando.

Por lo tanto, llegamos a las siguientes preguntas:

1. ¿Qué tan popular es la tipografía Serif y la Sans-serif en el cuerpo del texto y en los titulares?
2. ¿Qué fuentes se utilizan con más frecuencia?
3. ¿Cuál es el tamaño promedio de las fuentes (en pantallas pequeñas, medianas y grandes)?
4. ¿Cuál es la relación promedio del tamaño de la fuente de los titulares con respecto al cuerpo de texto*?
5. ¿Cuál es el promedio de interlineado* en el cuerpo de texto?
6. ¿Cuál es la relación promedio entre el interlineado y el tamaño de la tipografía en el cuerpo de texto?
7. ¿Cuál es la relación promedio entre el interlineado y el largo de las líneas (oraciones) en el cuerpo de texto?
8. ¿Cuál es el promedio de espacio entre párrafos?
9. ¿Cuál es la relación promedio entre el espacio entre párrafos y el interlineado en el cuerpo de texto?
10. ¿Cómo son los estilos de los links?
11. ¿Cuántos caracteres por línea son comunes en un cuerpo de texto?
12. ¿Con qué frecuencia los enlaces (links) son subrayados?
13. ¿Con qué frecuencia se utilizan fuentes de reserva o de reemplazo? (font fallbacks) ?
14. ¿Con qué frecuencia se implementan técnicas de diseño responsivo?
15. ¿Qué proporciones de tamaños de pantalla son perceptibles?
16. ¿Cómo manejan los sitios web la performance de las Fuentes Web (por ej. Google Fonts)?

*Interlineado: se refiere al espacio existente entre oración y oración.
*Cuerpo de texto: se refiere a la mayor cantidad de texto utilizada en un sitio web. A la mayor cantidad de contenido de texto en una página web.

Para responder a estas preguntas, hemos recogido más de 40 puntos importantes de los datos extraídos en las publicaciones investigadas. Todos estos datos pueden ser consultados en la hoja de cálculo antes mencionada. Podemos extraer varias reglas de oro de estos datos pero no recomendamos que se actúe en base a estos datos a ciegas, los datos son estadísticos. Sin embargo, poseen información útil y relevante.