Tipografía en web y legibilidad
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:
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.
También checa esto
15 comentarios en “Tipografía en web y legibilidad”
!Coméntale sin miedo!
Isopixel es el blog de Raúl Ramírez, diseñador gráfico, hace marketing digital.
Aquí escribimos un montón de gente, sobre diseño, tecnología, gadgets, música y otros temas que nos interesan...
Isopixel en línea
Reseñas
![Reseña del Motorola Razr [Parte 2]](http://isopixel.net/wp-content/themes/iso/js/timthumb.php?w=80&h=80&zc=1&src=http://isopixel.net/wp-content/uploads/2012/03/la-foto-3-e1331523648831-300x225.jpg)
Reseña del Motorola Razr [Parte 2]
13 mar, 2012
Buen ejercicio, aunque sigo convencido de que para fondos negros es mejor un gris muy claro para el texto. #f3f3f3, por ejemplo.
Haz la prueba y al posteamos con gusto para comparar, que dices?
la verdana es la que mas me gusta, es la que mas clara se lee, o no?
bueno yo he hecho algunos experimentos a este respecto y lo que si he comprabado muchisimo, sobre todo para pantalla es que una tipografia blanca sobre un fondo negro, aunque puede ser legible y entendible… en textos largos resulta bastante cansada y acabas viendo las tipografias grabadas en tus parapados cuando los cierras, simplemente creo que es por la cantidad de luz que imprime en los ojos tal contraste…
Coincido con Axel, el blanco me “escandila” cuando leo largo tiempo. A mi me gusta el fondo #eee y texto #000.
Parece que mi comentario anterior no se publicó. Les pasaba el comparativo del blanco contra el gris, para que chequen ustedes mismos:
http://www.axelvaldez.com/upload/blancovsgris.gif
Hombre, hay casos en los que si, por ejemplo cuando el texto no es lo mas importante, yo en mi fotoblog lo tengo gris sobre negro, quiero que destaque la foto, no el texto no?
Que por cierto, aplica tu regla a este cuadro de texto :)
He descubierto una web que utiliza solo blanco y negro, sin grises ni colores ni nada. Por no tener no tiene ni imagenes.
http://letrag.oscarotero.com
He descubierto una web que utiliza solo blanco y negro, sin grises ni colores ni nada. Por no tener no tiene ni imagenes.
http://letrag.oscarotero.com
hombre… viendo la imagen de Axel, yo si me kedo con ese gris, se ve mejor, menos esfuerzo para la vista.
hombre… viendo la imagen de Axel, yo si me quedo con ese gris, se ve mejor, menos esfuerzo para la vista.
aggggggggggggggg, lo siento, problemas con la conexion, perdon
de las sans-serif, creo que la más legible para la web es la Verdana, más que nada porque tiene el ojo más grande que Arial, Tahoma y Trebuchet y los caracteres se distinguen mejor a simple vista.
El color gris con fondo negro es que utilizo para mis trabajos.
Legible, y suave con la vista, muy recomendado.
estoy haciendo el diseño de un sitio web, y eso de utilizar valores se ve atractivo….cuando la publique se las envio!!!grachas