Jump to content
Sign in to follow this  
faunus

La legibilidad en diseño web

Recommended Posts

Saludos, compañeros gráficos

 

A propósito de un hilo reciente (era este) y otros muchos del pasado en los que se discutía sobre parámetros tipográficos para la legibilidad, y asuntos sobre la tipografía adecuada en tipo, cuerpo, grosor, anchura de línea, espaciados e interletrajes, anchura de márgenes y de columnas, distancias entre elementos, de que una con remates es mejor para texto de línea tirada y otro de palo es mejor para textos destacados y breves y toda esta vaina... todos estos estudios, manuales y recomendaciones parten del hecho irrefutable de que la edición impresa tiene muchos siglos de experiencia, y los diseñadores hemos aprendido de ello.

 

Ahora bien, es también evidente que el diseño de una página web (aparte de la programación, me refiero al aspecto) tiene otros parámetros porque depende de otros factores, tanto de las limitaciones de los navegadores como del manejo ergonómico y visual del usuario: distancia a la pantalla, resolución de pantalla, colores, etc, etc. Peeeero claro, es un asunto bastante más reciente que el trabajo para papel.

De modo que pregunto:

 

¿Existen o conocéis estudios para el diseño de págs web que consistan en parámetros de legibilidad?

Me refiero a lo equivalente de lo que digo arriba para edición en papel. Parámetros orientativos sobre tipografía para web, decisiones tipográficas y gráficas adecuadas e inadecuadas para el diseño web.

 

En principio, teniendo en cuenta que en diseño web no soy ningún especialista, bastaría algo de información básica para empezar.

Gracias! Expectante me quedo!

Share this post


Link to post
Share on other sites

Nos vamos a Tejedores, que lo de la web no es cosa de artes gráficas ;)

Share this post


Link to post
Share on other sites

Y una vez aquí te contesto:

 

En diseño para la web hay que tener principalmente una cosa en cuenta: si la web es HTML es casi imprescindible limitarse al grupo básico de tipografías que todo el mundo tiene instaladas en su ordenador. No sirve de nada que diseñes con una Clarendon porque el 99% de la gente no la tiene, y verá tu diseño en Arial o Times.

 

Hay fórmulas para incluir tipografías elegidas por el diseñador, pero no garantizan que todos los visitantes de tu web la vean así salvo que uses el texto como imágenes.

 

Otra cosa es trabajar en Flash, que de forma similar a los PDFs puede incrustar o trazar las tipografías.

 

Y en cuanto a los cuerpos de letra, básicamente lo que tú leas bien en pantalla lo leerán bien los demás. Pero lo habitual es usar 10-12 px. para textos, y para titulares al gusto :) Los tipos de menos de 8 px no se leen bien, más que por tamaño por definición de las pantallas ... y porque no hay suficientes píxeles para formar correctamente las letras.

 

Además hay que tener en cuenta que cada vez los monitores usan densidades de pantalla mayores y como en web las dimensiones no son absolutas (es decir, no se mide en mm sino en píxeles, y los píxeles son adimensionales) cuanta más densidad las cosas se ven más pequeñas. Es lo que pasa por ejemplo con los MacBook Pro de 15, que para un mismo tamaño de pantalla hay dos resoluciones a elegir, de 1440x900 y 1680x1050. Estos últimos tienen más resolución, más densidad, y todo se ve más pequeño.

Share this post


Link to post
Share on other sites

es casi imprescindible limitarse al grupo básico de tipografías que todo el mundo tiene instaladas en su ordenador. No sirve de nada que diseñes con una Clarendon porque el 99% de la gente no la tiene, y verá tu diseño en Arial o Times.

Hay fórmulas para incluir tipografías elegidas por el diseñador, pero no garantizan que todos los visitantes de tu web la vean así salvo que uses el texto como imágenes.

Otra cosa es trabajar en Flash, que de forma similar a los PDFs puede incrustar o trazar las tipografías.

 

Jonno la información que das con respecto al uso de tipografías no es del todo correcta, más bien se podría decir que es algo obsoleta... ;)

 

Hoy en día hay alternativas mediante Javascript que permiten utilizar fuentes "que no son del sistema (arial, times, courier, verdana...)" sin necesidad de recurrir a flash ni a texto como imagen (por otro lado también me gustaría añadir que hoy en día ni flash ni el texto como imagen garantizan que todos los visitantes de tu web la visualicen, ya sea por incompatibilidad del navegador con flash o porque el usuario tenga desactivadas las imágenes en su navegador).

 

Como ejemplo cito dos métodos: Cufon y Typekit.

Typekit aun no lo conozco muy bien, pero Cufon es compatible con iExplorer 6, 7, 8 y 9beta, Firefox 1.5+, Safari 3+, Chrome 1.0+, Opera 9.5+, iOS 2+ y Opera mini... Por lo que considero que no es "casi imprescindible limitarse al grupo básico de tipografías que todo el mundo tiene instaladas en su ordenador". De hecho cada vez se ven más sitios web que no se limitan a las fuentes del sistema, y cumplen con los estándares, son accesibles y totalmente legales con respecto al uso de tipografías (como en el caso de Typekit) :)

 

Eso sí, de momento no se aconseja el uso de dichas tecnologías para "párrafos", limitándose el uso casi en exclusiva a "encabezados".

Edited by ivanute

Share this post


Link to post
Share on other sites

Ivanute, no he dicho que las imágenes y el flash sean la única opción, sino que las alternativas no garantizan la correcta visibilidad en el 100% de los visitantes de la web :)

 

Pero la cuestión principal es la legibilidad, no el uso de tipografías especificas. Por eso no he profundizado en las diferentes formas de usar tipografías.

Share this post


Link to post
Share on other sites

Bueno sólo hice ese comentario porque hablabas de ello como "la cosa principal a tener en cuenta" ;)

Buscando en la web se encuentran algunos estudios sobre legibilidad en la web, no sé hasta qué punto son fiables pero nos hablan de distancias entre párrafos y borde de página, interlineados, tamaños de letra...

Share this post


Link to post
Share on other sites

Yo creo que sí es lo principal, porque para todas las demás alternativas necesitas algo más que HTML: imágenes, Flash, JavaScript... (y todo ello se puede desactivar, no lo olvides ;)) o no está implementado en todos los navegadores.

 

Basta ver las webs más visitadas para comprobar que lo más habitual es texto HTML exclusivamente, y en las tipografías "web-safe" (Verdana, Arial...). Si los grandes usan principalmente estas tipografías y no se consideran webs obsoletas, por algo será :)

 

Por otro lado Flash no lo mencioné como tecnología para poner textos en una web HTML (lo que se llama sIFR), sino como tecnología aparte de HTML para confeccionar webs enteras. Y ahí es donde tiene el sentido pleno mi comentario sobre incrustar o trazar tipografías. Para confeccionar titulares no lo veo como alternativa, las hay más adecuadas :)

Share this post


Link to post
Share on other sites

Es verdad, debí crear el hilo en tejedores :D :D

Pues saludos a los compañeros tejedores. Mi consulta es de las de "bajo nivel", como cuasiprofano.

 

(...) Buscando en la web se encuentran algunos estudios sobre legibilidad en la web, no sé hasta qué punto son fiables pero nos hablan de distancias entre párrafos y borde de página, interlineados, tamaños de letra...

A eso exactamente es a lo que me refería. ¿Sabéis algún estudio más o menos serio sobre esto? aunque no sea muy profundo, que si hago una búsqueda y me salen 50 artículos, yo como novato en diseño web (mi ecosistema es el diseño para imprenta) no sé distinguir cuáles de ellos son profesionales o cuales son tonterías.

 

Lo que me interesa es, por ejemplo, los criterios más recomendables para evitar que una página que "técnicamente" está perfecta (que se descarga bien y rápido, que todos los links se encuentran y funcionan, que los vídeos se cargan bien, que los frames se entienden bien, etc), en cambio en el aspecto gráfico y visual es horrorosa, con una estética de colegial y una legibilidad tipográfica lamentable.

 

Y no sólo me refiero a los criterios tipográficos, sino a los gráficos también, porque muchas veces se ven imágenes (fijas o cambiantes) con textos pegaditos, o textos pequeños en una cursiva toda pixelada, o frames de color azul celeste con letras finas en naranja... buaj.

Share this post


Link to post
Share on other sites

Faunus, creo que en este sentido tu experiencia como diseñador/maquetador sobre papel es suficiente garantía de que la página va a ser legible gráfica y tipográficamente.

 

Trabajando a resolución web en caso de que estés haciendo bocetos, o ya metido en faena (es decir, montando la web en HTML o Flash) vas a ver lo que verá cualquier persona que visite tu web. Y tu criterio te dirá lo que es correcto y lo que no.

 

Quiero decir, que si por ejemplo sobre papel ya sabes que hay colores que se matan o vibran, en pantalla lo mismo. Si acaso el que los colores sean RGB y no CMYK puede potenciar ciertos efectos, pero en todo caso los vas a ver y podrás actuar en consecuencia.

Share this post


Link to post
Share on other sites

Psss... en parte tienes razón, pero no es lo mismo:

Por ejemplo, en edición para papel, unos tipos para lectura corrida muy adecuados son los tipos con remates o serif como los famosos caslon, garamond, palatino, times... por todo lo que sabemos para papel. Pero para una página web, los tipos con remates no responden igual porque algunos remates se pierden en un monitor de resolución pobre, o para cuerpos pequeños, o se pixelan...

Lo que resultaría una buena idea en papel, para pantalla web puede ser una mala idea, por lo que en ese caso pienso que funcionaría mucho mejor un tipo de palo como cualquier helvética, gill sans o la elegante frutiger (dejando aparte el problema de visualización de fuentes ausentes por limitaciones del servidor/navegador).

 

Pero eso lo deduzco, en función de lo que supongo, y de los resultados que veo. No tengo un protocolo aproximado de sugerencias de legibilidad para web, equivalente al que sí tengo para papel (hay decenas de libros sobre el tema), y por tanto muchas decisiones sólo queda tomarlas por tanteo, cosa que no resulta muy profesional.

Si decimos: "bueno, pues le pones en helvetica o arial, y si ves que se lee mejor, pues ya está", no sé si para web es más importante la ganancia de limpieza de las astas poniendo en tipo de palo, o la pérdida de atractivo y el resultado monótono que queda un texto en letra de palo. Ese es el quid de la cosa.

 

Y así con muchos otros aspectos. Es el criterio lo que pregunto, que me falta, lo mismo que quien empieza a diseñar revistas igual le pone rótulos en comic sans, porque aún no ha desarrollado un criterio profesional.

Teniendo en cuenta que el diseño web tiene algunas décadas, lo mismo ya existe algo de esto.

Share this post


Link to post
Share on other sites

Hay miles de artículos en la web del tema para empezar no estaría mal que le echáseis un vistazo a este:

 

http://www.smashingmagazine.com/2009/03/18/10-principles-for-readable-web-typography/

 

Eso sí, hay que tirar de inglés, pero como casi toda la información relevante sobre el mundo web que hay que buscar.

 

Muy interesante estudio, sí señor gracias :)

Share this post


Link to post
Share on other sites

Está muy bien, gracias, negativeboy. ¡Eso es justo a lo que me refería!

Lo que pasa es que no estoy muy suelto en pikinglis. Buscaré artículos parecidos, a ver si alguno está en lengua de Cervantes con un poco de suerte.

Si alguno conoce artículos semejantes en cristiano que merezcan la pena, se agradecerá.

Si los encuentro yo, subiré el enlace por si queréis comentarlos.

 

Estoy viendo que casi no se puede ser diseñador web si no se tiene buen nivel de inglés. :( sniffff!

Share this post


Link to post
Share on other sites

Tampoco es muy difícil de entender. Puedes tirar del traductor de Google y no creo que tengas muchos problemas...

Share this post


Link to post
Share on other sites

Faunus, casi todo lo que se dice ahí apunta a lo que yo decía: que alguien con experiencia en diseño sobre papel, ya tiene suficiente criterio para hacer diseños validos para la web :)

 

Lo ideal sería buscar un tutorial de reciclaje en diseñadores para la web ;)

Share this post


Link to post
Share on other sites

Ahí le has dao!! Uno que contara "esto se hace como en papel, esto es cambio debe quedar distinto"

Yo por ese tutorial de reciclaje daría cualquier cosa, y citando a Forges, hasta besos a tornillo.:lol:

Share this post


Link to post
Share on other sites

Ese tipo de tutorial "tipografía papel-web" que comentais andará por ahí en español, lo que pasa es que a ver quien lo encuentra, daros cuenta el diseño web está en pañales y en contínuo cambio, las decisiones sobre legibilidad en web no son las mismas (en la base sí) que hace cuatro años, las safe web fonts se han ampliado, la resolución de las pantallas ha aumentado etc…

Yo he visto artículos, chuletas de profes de la Universidad, etc…, pero nada oficalmente en castellano (creo recordar que en amazon había un par de libros sobre el tema, pero sin saber que contiene como para recomendarlos); en fin, que todo esto es una carrera en la que estamos corriendo todos adistinto ritmo, hay mucha gente autodidacta (la mayoría en este país) y en la que USA marca el ritmo y ante la cual hay que "doblegarse" por cojones (el html5 está a la vuelta de la esquina, y solo en páginas guiris encontrareis tutoriales y artículos decentes sobre el tema), de ahí a que considere esencial el manejo aunque solo sea del inglés escrito para poder referenciarnos de como andan las cosas.

 

Hacedme caso y apuntaos al webdesignerdepot y al smashmagazine que os haré (diseñadores web) padres.

 

 

PD1: Decir que me encantaría que este fuese un foro mas participativo donde se pueda hablar de todas estas cosas e intercambiar opiniones sobre todos los cambios que se nos ciernen en el mundo del diseño web, pero es que esto está mu paraete ¿no? los pocos hilos interesantes tienen un par de réplicas y la mayoría de los que se abren son del tipo "socorro no me sale "x", a ver si me resuleve alguien el problema… Yo no soy de abrir hilos, pero si de aportar toda la información y ayuda que se pueda, me encantaría seros útil :rolleyes:

 

PD2: Siento divagar tanto, es cosa del sueño.

Share this post


Link to post
Share on other sites

Aún no he encontrado un tutorial profundo, pero algo parecido a lo que digo podría ser esto:

Nociones de composición para web

Es un poco resumido, pero va en la dirección correcta.

(edito para añadir otro)

De los de inglés, el más completo que he encontrado podría ser este:

Manual de legibilidad y tipografía

 

Sigo buscando...

Edited by faunus

Share this post


Link to post
Share on other sites

Resubo este viejo hilo para actualizarlo con info calentita:

Un buen manual sobre tipografía - legibilidad tipográfica - composición tipográfica con destino la pantalla que acaba de salir.

 

9788425227523_06_x.jpg?1426772519

 

Tipografía en pantalla, de Ellen Lupton (ed.), en Gustavo Gili, 2015.

Reseña del libro en Unos tipos duros

Reseña en la web de Gustavo Gili

Reseña breve en Cosas Visuales con muestra de varios pantallazos.

El índice no suena mal. Tiene buena pintilla y están hablando mucho de él en blogs de diseño. Más de 200 págs. por unos 30 aurelios.

Supongo que ya era tiempo de que hubiera estudios maduros. Si alguno de los tejedores lo tenéis o lo conocéis, podéis comentarlo.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.