¿No va siendo hora de crear sitios fáciles y agradables de leer?
No es una novedad que en mi sitio utilizo fuentes grandes. En estos momentos, sin ir más lejos, el tamaño de lo que escribo en un párrafo aparece a 1.1em, con un interlineado del 150%.
Algunos me lo cuestionaron. Pero estoy convencido de que los textos grandes facilitan la lectura. Y más a personas que, como yo, tienen problemas de visión.
El suizo Oliver Reichenstein lanzó, en su sitio web Information Architects, un cuestionamiento bastante acertado:
Muchos sitios web están saturados con textos pequeños que son difíciles de leer. ¿Por qué?
E inmediatamente replica a las excusas más comunes que pueden surgir:
No nos digas que las páginas “comprimidas” lucen mejor.
Los sitios web “apretados” no son agradables, sino nauseabundos.
No nos digas que muchos enlaces amontonados funcionan mejor.
Llenar sitios con contenido “porque sí” no ayuda a la usabilidad. Queremos que pienses y que pre-selecciones lo que es importante. No queremos hacer tu trabajo.
No nos digas que ajustemos el tamaño del texto.
¡No queremos modificar la configuración de nuestro navegador cada vez que entramos a un sitio web!
No nos digas que el scroll vertical es malo.
En ese caso, todos los sitios serían malos. No existe nada malo en realizar un desplazamiento vertical, así como no existe nada de malo en dar vuelta las páginas de un libro.
No nos digas que el texto no es importante.
El 95% de lo que conocemos como diseño web es tipografía.
No nos digas que usemos anteojos.
Despegate de la pantalla, inclinate un poco y continuá leyendo en una posición relajada.
¿Conclusión? Simple:
No existe razón alguna para atestar de información la pantalla. Es sólo un tonto error colectivo.
Entonces, la propuesta para hacer una web más legible y relajada aparece. Las recomendaciones son cinco:
El texto que estás leyendo en éste momento no es grande. Sólo tiene el tamaño que tu navegador utiliza por defecto.
Como usuarios, no queremos clickear botones para agrandar o disminuir el tamaño de la tipografía. Y tampoco queremos cambiar nuestras “preferencias”. Queremos leer claramente. Queremos que vos, como diseñador, te ajustes a nuestras configuraciones de usuario y no a la inversa.
Inicialmente, es difícil crear un buen diseño con tipografías de gran tamaño, pero esa dificultad te ayudará a diseñar un sitio más simple y comprensible. Llenar un sitio con información no es difícil; crearlo sencillo y fácil de usar, sí lo es.
Al principio quedarás asombrado por lo grande que se ve el texto, pero después de unos días no vas a querer ver nada más pequeño que1emo100%para los textos principales.
Lucirá grande, pero luego te darás cuenta por qué cada navegador utiliza dicho tamaño de fuentes.
Dejá que el texto respire. Dejá que los lectores respiren. Usar espacios en blanco no es una tontería de los diseñadores. No se trata de gusto.
Tener aire alrededor del texto reduce el nivel de stress, ya que hace mucho más fácil centrarse en la esencia. No necesitás llenar toda la ventana de contenido. Si los espacios en blanco lucen bien no es por un efecto secundario: es por la lógica consecuencia del diseño funcional. ¿Quién dijo que los sitios necesitan saturarse de contenido?
Por favor, asegurate de que el ancho de la linea no sea muy amplio, y de agregar un espacio tanto a la izquierda como a la derecha para hacer más simple la lectura. Tampoco queremos ajustar el tamaño de la ventana. Cuando abrimos un sitio sólo queremos leer tranquilos. Las columnas escalables son lindas; líneas de texto interminables a lo ancho de la pantalla no lo son.
Los especialistas de la lectura dicen: “Líneas muy estrechas arruinan la velocidad de lectura porque tanto la línea superior como la inferior son captadas por la vista al mismo tiempo. El ojo no puede centrarse en líneas muy cercanas, (...) generando que el lector gaste más energía en el lugar equivocado y se canse más fácilmente. Lo mismo sucede con lineas excesivamente separadas.”
Por defecto, enHTMLla altura de las lineas es demasiado pequeña. Si se incrementa, el texto se vuelve más legible. Una altura del140%es una buena marca.
No tendría que ser necesario mencionar esto. Pero si vos todavía usas alguna de las siguientes combinaciones:
...entonces no sos diseñador web. Si insistís en que lo sos, nadie se enterará, ya que nadie podrá leerte. Paremos estas tonterías y veamos lo que escribes.
Para los diseños, contrastes muy fuertes (blanco y negro) tampoco son ideales. Un buen punto de partida es usar#333y#fff.
Queremos buscar texto, copiar texto, guardar texto, jugar con el cursor y marcar texto mientras leemos. El texto en las imágenes luce bonito, pero no es de lo bonito de lo que internet se trata. La web trata sobre comunicación e información, y la información necesita ser legible, útil, “citable”.
Si no podés hacer que tu sitio luzca bien sin texto en las imágenes, me temo que tendrás que recomenzar desde el principio.
Nobleza obliga, el artículo original fue traducido por Francisco, que me hizo el favor de pasarlo a español para mí. Yo sólo retoqué la traducción para publicarla acá, y supongo que al mismo tiempo la desvirtué.
Ahora bien: ¿cuántos de los weblogs que leés cumplen con este estándar o son fáciles y agradables de leer? En mi caso, puedo contarlos con los dedos de una mano:
El caso contrario, weblogs con textos casi ilegibles por lo pequeños y/o apretados, sobran. Ironía del destino, si nos ponemos a pensar que la mayor parte de los weblogs están construídos a base de parrafadas monumentales. =P
¿No sería hora de que empecemos a crear buenos contenidos y, sí, lindos diseños… pero visibles y legibles?
comentarios desactivados para este artículo
Para recibir las actualizaciones del sitio directamente en tu lector de noticias, agregá este enlace a tu lector de feeds favorito.
Para saber qué fue lo último que se comentó en el sitio, agregá este link a tu lector de feeds.
Todo es Construcción
Lewenhaupt es gestionado con TextPattern
El estilo Sangre Brillante es una creación de Jonathan Emanuel Lewenhaupt
Condiciones de uso: Licencia Creative Commons Argentina 2.5
Weblog es Cultura
WalteR Funk » # » 11.12.06
“¿Tu weblog es 100%FDL?”
Por supuesto!, el Funk Da Libertad… siempre lo digo ;)
Fuera de broma, tenes razón en muchos de los puntos mencionados, en la gran mayoría pero no estoy del todo de acuerdo con el tamaño exagerado de las fuentes, creo que un buen 0.9 es mas que suficiente, a lo sumo un 1em pero más que eso no lo llamaría estándar
Oliver Reichenstein » # » 11.12.06
Dude, 1.1em on a windows machine is too big. Windows antialiases in a very ugly unreadable way. The idea is to leave the default font size unchanged (=1em). Best
Oliver
Federico » # » 11.12.06
Gracias por la mención, aunque actualmente tengo el diseño completamente roto. :)
Por cierto, 1em es el tamaño inicial de toda configuración. Es una forma de estándar.
Qiu » # » 12.12.06
Recorcholis!!! yo me jactaba que mi blog era bien legible… y ahora me entraron dudas.
En mi trabajo tengo un monitor de 19’, tengo que reconocer que todo se ve “bien” (o por lo menos grande).
(P.D.: Le llegò mi mensaje?)
Stan » # » 12.12.06
Gracias por la mencion mi distinguido, me siento inpuro leyendo tu post. Tengo rato que no le meto mano, el diseño esta roto y hace meses que no reviso si llega a validar.
Me encantan las fuentes grandes, pero tambien los pequeños detalles. Incluso en el messenger utilizo el font de 14.
Veremos que sale en la siguiente version del blog. Gracias nuevamente por la mencion.
marcoss » # » 16.12.06
Acá hay un error muy grave, las medidas en EM dependen del tamaño
adquirido, es decir que si la fuente por defecto en mi navegador (o la
definida en el elemento padre) es de 10px, 1em = 10px. Configurar un
sitio para mostrar la fuente a 1em no garantiza que el tamaño de
fuente sea “adecuado” y poco tiene que ver con que sea legible.
EN tu caso, yo veo la fuente a 17.6px aprox, sinceramente es un tamaño
muy molesto para la lectura y bastante ilegible por cierto, aún usando
una resolución de 1280×1024.
Estoy de acuerdo que el texto a 10px es poco accesible, pero mas de
12/14px ya molesta.
Un sitio debe estar diseñado de manera tal que una persona sin
dificultades visuales pueda leerlo sin problemas y en el caso de tener
un visitante que si padezca algún tipo de afección en la vista, este
debe responder a las *preferencias de accesibilidad definidas en el
sistema del usuario*.
Sin ofender, me parece que estas viendo las cosas desde tu
perspectiva. Probablemente a vos te sea mas cómodo leer a ~17px, pero
para el común de la gente 12px generalmente es suficiente.
(Vale aclarar que esto es válido, considerando que el uso de pixeles
para definir el tamaño de las fuentes todavía sea una práctica común,
cosa que debería discontinuarse en un futuro no muy lejano)
Francisco » # » 17.12.06
Marcos, que te parece mi sitio. Para vos, ¿se lee bien?
En el caso de Jonathan, no creo que sea difícil de leer. A pesar del gran tamaño que posee la tipografía, veo mucho aire entre lineas lo cual me parece un punto a favor.
Si queres que el sitio tenga un menor tamaño, podrías crear un script para Greasemonkey o modificar tus preferencias en el navegador.
Dicho sea de paso, en 12px se lee bastante este sitio: comparativa
marcoss » # » 17.12.06
Francisco, tu sitio muestra el contenido a ~16px, lo que hace que la visual mejore un poco, pero no solo es el tamaño de la tipografía lo que cuenta sino que también influye mucho el contexto; en tu caso el contenido está centrado y es el protagonista de la pantalla, además la relación títulos/contenido está bien balanceada.
En el caso de Jonathan los títulos son grotescos, llaman demasiado la atención y quizás lo que mas “molesta” es la barra lateral, donde el texto adquiere mas importancia que el contenido mismo.
Después hay otros detalles menos importantes, como el uso de distintas fuentes para los títulos y el contenido, una combinación que personalmente no me termina de convencer, sobretodo cuando la brecha de tamaño entre ambos es tan grande. Además es muy importante la elección misma de la fuente, hay fuentes que a determinados tamaños se ven muy mal, sin ir mas lejos Georgia se ve terrible en Windows con ClearType activado.
En fin, citando al mismo autor que mencionas en el artículo, “Usability alone won’t do”. La tipografía es muy importante, cierto, pero no es el 95%, la AI es bastante mas compleja y depende de muchos factores.
Para cerrar la idea te dejo con esto, en Design Eye for the Usability Guy hay un ejemplo que ilustra lo que planteo, el sitio original (Mr Nielsen) tiene un tamaño de fuente bastante grande y un interlineado aceptable, pero sin embargo es terrible, lo primero que veo al ingresar ahí es un montón de texto mal organizado. Ahora si vemos la propuesta de designbyfire, a pesar de reducir el tamaño de la fuente a 12px, el texto está bien estructurado, respeta cierto patrones de organización, incorpora ayudas visuales, y la relación entre los distintos niveles de jerarquía del contenido es mucho mas equilibrada, de eso se trata la AI.
p/d: En los comentarios,
ol.comments li p {margin:1em 0;}JEL » # » 18.12.06
Ahora mismo no me acuerdo cuál es el tamaño de fuente que viene por defecto en Firefox. A partir de la cual, obviamente, se determina la medida de
1emen mi navegador. Uso16pxpara las serif/sans-serif y13pxpara las monoespaciadas.Lo que sí puedo decir es que, tanto a
10pxcomo a12px, con resoluciones de1024×768y1280×1024(ClearType activado en todos los casos), el texto se ve más pequeño y, todavía, legible. No sucede lo mismo con sitios como, por ejemplo, el de Marcoss, que declara fuente al68,5%de su tamaño y se ve, a16pxy1024×768, como si fuera de8px. En las otras combinaciones que menciono, directamente no puede leerse por lo pequeño de la tipografía. Al revés de lo que sucede con el sitio de Francisco, que se lee bien en todos los casos.Pero, como bien señala Marcoss, estoy viendo todo desde un punto de vista personal. Con lentes de contacto que tienen aumentos de 21 y 22 puntos para miopía + casi 3 de astigmatismo. Yo soy una de esas personas que tienen problemas visuales para acceder a los sitios web, y te puedo decir que la mayor parte usan la tipografía demasiado pequeña para que yo pueda leerla.
Creo que a eso apunta Oliver con su propuesta, a que el sitio se adapte a las preferencias de visualización definidas por el usuario. Si vos, Marcoss, estás viendo la tipografía de mi sitio a
+17px, quiere decir que tus preferencias están definidas en torno a los16px, prácticamente las mismas que uso yo. Si ves normalmente, podrías bajar esas preferencias a12pxy comparar, tanto acá como en otros lugares, a ver cuán cómodo te sentís. =SSé que Francisco tiene problemas en la vista, también, por lo que intuyo que usa aproximadamente las mismas opciones que yo. ¿Cierto?
Coincido con la apreciación de Marcoss sobre la barra lateral y el tamaño de los encabezados, aunque no los llamaría grotescos, che. Marcoss malo, no me quiere. =P Habrá que empezar a ajustar las medidas y demases. Por eso, te pregunto: ¿qué me recomendarías? Cuando miro las capturas que hizo Francisco, percibo que los títulos funcionan mejor en la que está a
10px, pero supongo que se debe a que no tienen salto de línea.Juan » # » 19.12.06
Yo tengo problemas de vista y ahora me atrevo a decir que me resulta muy cómodo leer tus parrafadas monumentales :P. En un principio fue muy incómodo adaptarme al gigante pero ahora coincido con vos en lo que decís que se lee mucho más relajado… pero no lo comparto y creo que ese es quizás el punto que hace saltar a muchos de los que leen este post. Es como que imponés que todos tienen que adaptarse a este estandar cuando en realidad sólamente se trata de gustos.
De la misma manera que a vos te gustan las fuentes gigantes, hay mucha gente que si tuviesen una hija, la llamarían “Verdana 10” o “Arial 12” :P. Hablando en serio, es una cuestión de gustos, nada más que eso.
Yo no toco las preferencias del navegador porque me gusta ver los diseños tal cual como el diseñador lo planeó y sacar mis conclusiones en base a eso. Ahora, si el texto es ilegilble para mi o me hace esforzar mucho, no tengo ningún tipo de problema en azotarle el dedo índice a la tecla + y aumentarle el tamaño.
Es muy cierto lo que planteás. ¿A cuánta gente vimos pegada a la pantalla tratando de alcanzar leer un texto equis? ¿Cuántas veces lo habré hecho? Pero sobre gustos no hay nada escrito.
Federico » # » 19.12.06
Por pedido suyo, le comunico que le respondí con una visión más venenosa en Fuentes grandes :)
Gancé » # » 20.12.06
Acá leo que todos apelan a la legibilidad (cosa muuuy importante) pero no hay mención a la estética de la tipografía de un sitio en términos populares.
Por ejemplo, yo leo el blog de JEL y me queda muy cómodo (aunque le reduciría un pelin).
No se puede negar que leer, se lee más que bien. ¿Queda “lindo”? Si fuera un pelín mas pequeño me gustaría más.
Pero hay que tener en cuenta que las personas que visitan nuestros blogs, entienden lo “excentricos” que somos y los lujos que nos permitimos en favor de la usabilidad y la experimentación, y por lo lo expuesto, nos pueden entender el porque desarrollamos esto así.
Pero un cliente X nos va a decir “dejate de joder con eso, y pone texto mas chiquito que eso queda feo”.
El diseño tipo Jakob Nielsen, no va a existir jamás en la “vida real” (gracias a dios).
Entonces, en proyectos generales hay que tratar de combinar “gusto popular” y funcionalidad.
Buen post JEL. Gracias por la mención.
Francisco » # » 20.12.06
Como bien dijiste Jonathan, tengo problemas de visión, pero para ver de lejos. Creo que es 1.5/1.75, lo cual no es mucho pero es significativo si le sumas 0.25/0.5 de astigmatismo.
Creo JEL, que si le disminuís la letra a 100% el sitio ya queda perfecto.
Rodrigo » # » 21.12.06
“Algunos me lo cuestionaron. Pero estoy convencido de que los textos grandes facilitan la lectura. Y más a personas que, como yo, tienen problemas de visión.”
No. Ojo con esto. Mientras mas grandes sean las letras, más “esfuerzo” tiene que hacer el ojo al leer y recorrer cada una de ellas. Yo siempre que entro a tu sitio tengo que achicar la tipografía porque realmente se me hace imposible leer un texto extenso en este tamaño. Una cosa es una tipografía “grande” y otra es “excesivamente grande” (como la tuya, JEL). Sinceramente, el tamaño de texto “excesivamente grande” produce fatiga visual (me pare) y hasta creo que favorece los llamados “ríos” en tipografía (mucho espacio en blanco que hacen que el ojo tienda a perderse en una linea).
“Acá leo que todos apelan a la legibilidad (cosa muuuy importante) pero no hay mención a la estética de la tipografía de un sitio en términos populares.”
La tipografía es fundamental y crítica en un diseño. Elegir una tipografía y el tamaño de la misma van de acuerdo a lo que estás diseñando. Uno no puede simplemente “tirar una tipografía enorme” en un sitio de un diario, por ejemplo (porque en el diario se priorizan contenidos, noticias, todo lo que tiene que entrar en una home de un día cualquiera). Te imaginás a Clarín con una tipografía como la tuya? No entra una sola noticia sin hacer scroll. Imposible de diseñar.
aro72 » # » 21.12.06
lo voy a intentar. es cierto que se puede y se debe poder leer comodamente. no te prometo nada, es que como bien aclaras, no soy diseñador. asi que, si veo que mi blog se ve peor que ahora, dejo todo como esta y ya. Statvs Qvo!
gitargirl » # » 4.01.07
yo estoy de acuerdo con Jonathan: los conceptos de usabilidad, funcionalidad y diseño estan relacionados.
saludos!