Gracias al CSS y a diferentes servicios de fuentes podemos integrar tipografías en nuestros proyectos de diseño web de forma fácil. Michael Li hizo un estudio, a mi ver, interesante. Analizó 1000 de los sitios web más populares para entender qué fuentes y cómo se están usando las tipografías en el diseño web actual.
Algunos de los resultados me parecen importantes, y esto es lo que vamos a compartir en el artículo de hoy.
Familias tipográficas
Siempre hay un gran debate entre las tipografías sans-serif y las serif. Para la Web, yo soy más pro-sans-serif, pero como debes imaginar no estoy solo, ya que se estima que el 85% de las fuentes son “sans-serif, y el resto se deja para serif, monoespaciado, etc…”
Las familias tipográficas (font-family) en CSS son una lista priorizada de fuentes que el navegador procesa según las fuentes disponibles, a partir de la primera fuente definida. Por tanto, como diseñador debes poner primero la fuente que deseas y después las fuentes de respaldo.
Algunos datos descubiertos por Li, sobre este tema, son bastante curiosos. Por ejemplo:
- “La profundidad media de la pila de familias de fuentes es 4” (1 principal, 3 de respaldo)
- “Hay sitios web con una profundidad de pila de fuentes de 6, 12 o incluso 21!!” Muchos tipos de fuentes para un sitio web, ¿no estás de acuerdo?
- Las 6 fuentes más utilizadas suelen ser: “san-serif”, “arial”, “helvetica”, “helvetica neue”, “roboto”, y “open sans”. ¿Te sorprende? No deja de ser curioso que en este top-6 todas las fuentes sean de palo seco.
- Además, la probabilidad de ser “sans-serif” varía del 58% para encabezados del tipo H1 al 70% para H2, al 89% para H5 y al 93% para etiquetas de párrafo (P). Li sugiere que si quieres usar “serif”, mejor hacerlo en los encabezados en lugar de los párrafos.
Emparejamientos de fuentes
Otra observación interesante tiene que ver con el emparejamiento de fuentes. Según los datos de Li, el párrafo con serifas promedio se empareja con un encabezado con serifas aproximadamente el 51% del tiempo, mientras que el encabezado con serifas promedio solo se empareja con un párrafo con serifas el 36% del tiempo.
¿Qué tamaño debe tener mi fuente?
Si te preocupa la facilidad de lectura y la accesibilidad, las fuentes más grandes son tu opción. Pero si quieres tener una mayor densidad de información debes pensar en fuentes más pequeñas.
El análisis de Michael Li ha concluido que el tamaño de fuente medio es 14px. También puedes encontrar 16px, el clásico 12px, y 18px. Lo que es “raro es encontrar tamaños de fuentes por debajo de 10px o por encima de 24px”.
Encabezados
En relación a los encabezados, resulta que los diseñadores, según los datos, optan por usar un tamaño “más grande con más frecuencia que un peso más pesado (94% frente a 82%), pero a menudo usan ambos (76%). Muchos sitios web no usan encabezados de tipo H1, y hacen que sus H2 sean más grandes.
De hecho, hablando de pesos, la mayoría de las etiquetas de párrafo son normales - peso de fuente 400 -, y la mayoría de los pesos de los encabezados están en negrita - peso de la fuente 700.
Con respecto a los tamaños, los resultados del estudio dicen que “en la página mediana, H1 es aproximadamente 1.9 veces el tamaño de P. Esta proporción disminuye hasta H5, cuyo tamaño mediano es el mismo que P. Para distinguir (H5 de P) se está usando una fuente diferente o más pesada.
Conclusión
Conocer datos como el del estudio de Michael Li te permiten diseñar dentro de estándares actuales, y modernos, y estar al día de las tendencias. Por tanto, a no ser que quieras diseñar algo totalmente disruptivo, creo que vale la pena tener en cuenta estos datos tipográficos para tu diseño web.
¿Has observado otras tendencias en el uso de tipo de fuentes en el diseño web? ¡Coméntalo abajo!
FOTO: @georgejmclittle @freepik
Fuente:
