Tipografía en web y legibilidad
Por vuarnet | 9 de February, 2005.
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.
+'&title='+encodeURIComponent(document.title)+'&overview='+encodeURIComponent(document.title)+'&urllanguage=es&urlaffiliate=32003&encoding=UTF-8&urlpicture=http://www.viadeo.com/images/shareit/viadeoflower.gif')
Comparte este artículo en Viadeo
February 9th, 2005 at 1:29 pm
Buen ejercicio, aunque sigo convencido de que para fondos negros es mejor un gris muy claro para el texto. #f3f3f3, por ejemplo.
February 9th, 2005 at 2:25 pm
Haz la prueba y al posteamos con gusto para comparar, que dices?
February 9th, 2005 at 2:52 pm
la verdana es la que mas me gusta, es la que mas clara se lee, o no?
February 9th, 2005 at 3:47 pm
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…
February 9th, 2005 at 4:04 pm
Coincido con Axel, el blanco me “escandila” cuando leo largo tiempo. A mi me gusta el fondo #eee y texto #000.
February 9th, 2005 at 4:06 pm
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
February 9th, 2005 at 4:20 pm
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 :)
February 10th, 2005 at 2:35 am
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
February 10th, 2005 at 2:36 am
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
February 10th, 2005 at 8:53 am
hombre… viendo la imagen de Axel, yo si me kedo con ese gris, se ve mejor, menos esfuerzo para la vista.
February 10th, 2005 at 8:55 am
hombre… viendo la imagen de Axel, yo si me quedo con ese gris, se ve mejor, menos esfuerzo para la vista.
February 10th, 2005 at 8:57 am
aggggggggggggggg, lo siento, problemas con la conexion, perdon
February 11th, 2005 at 10:23 am
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.
February 12th, 2005 at 9:49 pm
El color gris con fondo negro es que utilizo para mis trabajos.
Legible, y suave con la vista, muy recomendado.
March 20th, 2007 at 11:58 am
estoy haciendo el diseño de un sitio web, y eso de utilizar valores se ve atractivo….cuando la publique se las envio!!!grachas