.

Los columnistas de Visualmente::Carlos Gámez Kindelán::Rodrigo Sánchez::Jordi Catalá::Mario Tascón::Jaume Serra::Samuel Granados::Dolores Pujol::Fabio Marra::Luiz Adolfo::Leo Tavejnhansky::Massimo Gentile::Pablo Corral::Angel Casaña::Pedro Pérez Cuadrado::Tomás Ondarra::Kohji Shiiki::Elio Leturia::Rodrigo Fino::Ramiro Alonso::Sergio Fernández::Lo más leído de Visualmente::Portadas::Infofreak::Fotografía::Especial Helvética::Especial: Frases del 2008::Especial Cooper Black::Creatividad::Caricaturas::Cuartas Jornadas::Cumbre Mundial::Desnudos::Diarios impresos::Diarios online::Diálogos Visuales
Nuestros Blogs Asociados::Visualmente::Indio::Infograkids::Infografreaks::Infografreaks-edu::Mala Magazine::Bar Visual::Tipográficamente::Chillart::Universitariamente::Visualmente-Edu::Vía Libre::Bar Uch::Que Bien Que La Estamos Pasando::Twittermente::Seguinos en Twitter::Las editoras de Mala::Cristina Poetto::Miru Trigo::Ivonne Caamaño::Ana Ottone::Evita Las Tentaciones::Gaba Urco::Nacha La Macha::Beta Ramírez Bustelo::Carolina Ramírez::Connie Moreno::Juana Medina::Yanina Isabella Tejera::Anna Marti::Lina Delgado Cortés::Sofi Ginestra::India Herrera::La Bender Baruch::Los editores de Chillart::Martín Pons::Pinguboy::Raúl Manrupe::Elio Leturia::Les Cuevas Otonelli::Nathalie Sonne::Germán Kemerer::Lucas Groglio::Rodolfo Fernández Alvarez::Raúl Della Valle::Julio Cuervo::Javier Cuello::Julián Chappa::Fabián Carreras::Jenny Canales Peña::Gastón Caba::Pablo Bobadilla::Federico Fuertes Guzmán::Bender Baruch::Seguinos en Twittermente

21.3.05

Ocho consejos para mejorar la lectura en pantalla (parte 2)

sara-quinn(Por Sara Quinn) 1. Tomá control sobre las fuentes por default. La tipografía elegida puede llegar a no estar instalada en la computadora de los lectores. Si no la tienen, su browser les mostrará otra por default. Por eso, es bueno indicar más de una tipografía, en orden de preferencia, para que los browser tengan otras opciones antes de recurrir a la fuente por default . Por ejemplo, si quieres una sans serif, puedes incorporar esta cadena de comandos en el diseño: Verdana, Trebuchet, Helvética, Geneva.
2. No justifiques los textos. Como es imposible controlar el espacio entre palabras, en algunas computadores pueden llegar a verse grandes blancos entre una palabra y otra.
3. Definí el tamaño de las fuentes en píxeles y no por puntos. La resolución de cada monitor es diferente, por lo que una fuente a la que le diste “10 puntos” de tamaño puede verse gigante en una pantalla y mucho más pequeña en otra.
tipografía4. Limitá el texto subrayado. Muchas líneas horizontales pueden hacer que el lector deje de leer. Si necesitás señalar los hipervínculos subrayándolos (y no solamente, por ejemplo, usando un color diferente), tratá de que haya pocas palabras que sean links.
5. Cuidá los detallés. Al igual que en el diseño impreso, la consistencia son importante. Detalles sueltos en el diseño hacen que los lectors sospechen que la edición del contenido también puede ser descuidada. Establecé un espaciado uniforme entre y alrededor de los párrafos. Cuidado con los títulos que se cortan y forman líneas viudas y huérfanas.
6. Usá CSS (Cascading Style Sheets) cuando programás en HTML. Te permite tener mayor control sobre la forma en que se ve la página en cada browser en cuanto a fuentes, tamaños., colores, estilos, espaciado y alineación. Además, hace que la actualización de un sitio sea más fácil y sencilla, ya que sólo con cambiar el CSS todo el sitio (homepage y páginas interiores) se actualiza al mismo tiempo.
7. Utilizá fuentes incrustadas en el sitio. Si el presupuesto con el que se cuenta es alto, se puede solicitar el diseño de una tipografía especialmente pensada para la empresa o producto en cuestión. Como la fuente es propia, puede ser incrustada en el sitio y así todos los que lo visiten podrán ver la tipografía original (ya que en la estarán descargando en sus computadoras). Otra posibilidad un poco menos costosa es incrustar en el sitio una tipografía ya existente (como Verdana, Georgia o Trebuchet), para lo cual es necesario solicitar el permiso correspondiente.
8. Sobre los archivos PDF... Los PDF (portable document format) capturan cada página -tipografía, imágenes, gráficos- exactamente en la forma en que han sido diseñadas. Por eso son una forma sencilla de hacer que todos vean exactamente lo que se quiso diseñar, sin ningún tipo de cambio provocado por la resolución del monitor o por el browser utilizado.

Este artículo es una traducción, realizada con autorización de la autora, de la columna Eight Things You Can Do Now To Improve On-Screen Readability que fue publicado por el Poynter Institute, Estados Unidos.

También:
>> Para que leer en la pantalla no sea una tortura
china (parte 1)

4 comentarios:

Anónimo dijo...

Para la correcta visualización en pantalla, las fuentes no tienen que ser especificadas en píxels, sino en EMS.
¿Puntos?. La web no es una imprenta, eso no corre. Poniéndola en pixels, en navegadores como el explorer no pueden ser escalables, en cambio en EMS sí.
¿Incrustar tipografías?. Eso solo es posible en Flash. Vale hacer la aclaración. Y no solo con fuentes diseñadas específicamente para el sitio, sino con cualquier tipo de fuente.
Ya que van a dar consejos, es bueno que lo hagan con propiedad, sino parece de Revista Para Tí (por más que sea una traducción de un medio yanqui).

Saludos.

El Norbi Baruch dijo...

Querido Anonymous, ya que vas a criticar sería bueno que también vos lo hicieras con propiedad.
Más allá de que estás en todo tu derecho en no estar de acuerdo con los consejos de Sara Quinn, vale la pena hacer algunas aclaraciones.
1) Sí es posible fijar el tamaño de las fuentes en puntos cuando programas en HTML. No sé cómo traducirías vos "points" pero es a eso a lo que se refería Sara.
2) La cuestión de si utilizar EMS o píxeles es un poco más profunda que lo que planteas. Es verdad que si utilizas píxeles el sitio no podrá ser escalable para quienes usar el Explorer. Pero también es verdad que utilizando EMS como vos proponés no todos verán las cosas de la misma manera, ya que el EMS es una forma de fijar tamaños RELATIVA. Trabajar con píxeles permite controlar el diseño y presentación del sitio. Es verdad que los usuarios pierden un poco de libertad... pero ya ese es otro debate entre diseño y usabilidad (un debate no menor, que retomaremos luego en algún otro post).
3) No es necesario usar Flash para incrustar fuentes. Hay otras formas de hacerlo. Por ejemplo, utilizar la tecnología Web Embedding Fonts Tool (WEFT) de Microsoft. Más información en http://www.microsoft.com/typography/WEFT.mspx.
Saludos.

Anónimo dijo...

Hola, muy bueno el artículo.
El programa weft es buenísimo, pero solamente es para microsoft. He visto un par de sitios con el navegador firefox, con tipografías diferentes a las de siempre (arial,verdana,etc). También me pareció que algunos usan fuentes que no tienen una aceptación de 100%, pero si de 40% o 50% proporcionando fuentes alternativas,mediante css.
Chaau

Anónimo dijo...

defino las fuentes en pixeles, pero cuando voy a los articulos antiguos, el tamaño de la letra es mas pequeño, o ms grande, ¡como se hace un tamaño de texto uniforme para todo el blog?


Gracias

polaroids visuales

lo mejor del 2012

works::googleopoly

works::kiss einstein

works::Beatles Stereo

works::PORTADA TIPOGRAFICA

works: yeah, yeah, yeahs

Seguidores

BIG TASTY VISUAL

Cerati no murió

Periodic Table of Typeface

newsgames de ian bogost

pantone gámez kindelán

proyecto walsh

THE QR SERIES

THE QR SERIES
EL QRIFER

El ORIGINAL

QR-VERANO

El MIQR-EY MOUSE

LA PUQRA

El Black Demon

El QR Pí

El QR JOJOJO

Merry QRistmas

El Bender Baruch

El Norbarba

Le Garq

El Norwerine

Archivo VisualMente

COOPER BLACK FETICHE

Gabriel Campanario

made in japan

norberto chaves dixit

Nuestras categorías

Mi vieja era de Boca

Mi vieja era de Boca
Especial Boca Juniors

Blog miembro de la Asociación 3.0
30

(El autor del logo es Rodrigo Visscher. Fue elegido a través de un concurso abierto organizado por VisualMente.)

Nuestros reportajes

Hazte amigo-Facebook de El Norbi

Johnny Depp tipográfico

Helvética, la bestia pop

Helvética, la bestia pop
Especial Helvética

SAVE THE CHIRINGUITO

METROPOLI COOPER BLACK