Tipografía en web y legibilidad

movable type Se puede tratar de explicar de mil maneras, sobre tipografía y legibilidad en el web. Mejor hacer un pequeño y rápido ejercicio para ilustrarlo y sacar mejores y más rápidas conclusiones.

Hagamos el siguiente experimento. Pongamos cuatro textos, en la parte superior izquierda usemos una tipografía sans (palo seco les dicen, o sin patines) como es la Arial a 11 puntos, sin anti alias. El texto es lo de menos, podemos usar el Lorem Ipsum. Ahora pasemos al lado superior derecho, pero hagamos lo mismo con una tipografía Times también a 11 puntos.

Hasta aquí los resultados son evidentes, esta demostrado que las tipografías Serif o con patines (los patines son esos pequeños remates en la base) ayuda a crear bloques y una línea virtual que facilita la lectura, pero ojo, esto solo en impresos. En web como se puede ver esto no es tan cierto. Los pequeños remates suelen resultar contraproducentes ya que pierden definición y se emplastan en pantalla.

Ahora vamos más allá y hagamos una dura prueba a nuestros textos. Invirtamos los colores. Con fondo negro con tipografía blanca vemos claramente la supremacía de los tipos sans sobre los serifs. Nuestra querida Times sale muy mal librada.

Veamos esta imagen para poder comparar:

textos-en-contraste.gif

Conclusiones

  • Evita usar tipografías con patines en el web y más aún si es en tamaños pequeños.
  • Los fondos oscuros no ayudan mucho a la lectura.
  • ¡Por favor! nunca uses tipografía gris sobre fondo negro. Miren que he visto una centena de blogs y sitios así.
  • Utiliza colores contrastantes en relación fondo/tipografía.
  • A pesar de que digan lo contrario, el mejor contraste lo ofrece el fondo blanco contra tipografía negra.

De este ejercicio pueden salir muchas más conclusiones. Las dejo a su criterio.

Share via