5 errores tipográficos comunes en el

diseno web y como solucionárlos:

Cromos vs T-mágázine
La buena tipografía es invisible, la mala tipografía está en todas
partes.

Craig Ward

Los diseñadores web tenemos todas las herramientas para que leer en
pantalla sea una buena experiencia. Esto puede lograrse con una
adecuada maquetación de párrafos. Las reglas para hacerlo son
sencillas pero lo más importante es tener algo de sentido común, tener
claro que nuestro objetivo es construir una buena experiencia y transmitir
las ideas de los autores.

Podemos aprender algo observando como lo han hecho otros

diseñadores.Hice el ejercicio de buscar 5 errores tipográficos en
la versión web de la revista Cromos que es la revista de moda de El
Espectador (uno de los periódicos colombianos más leídos) y encontré
cómo se evitaron esos errores en la versión web de T-magazine, la
revista de moda de The New York Times.

1. Escoger una fuente incorrecta para párrafos: ¿serif o

sans serif?

Trebuchet en Cromos

No necesariamente tenemos que usar fuentes del sistema para maquetar

párrafos para la web. Tenemos muchas opciones gratuitas en Google
Fonts y enFontsquirrel, por mencionar dos ejemplos. Escoger Verdana
o Trebuchet para maquetar un párrafo para la web no es
necesariamente un error, pero podemos hacer algo mejor teniendo en
cuenta que tenemos muchas opciones de fuentes más legibles.

Georgia en T-Magazine
Los diseñadores editoriales descubrieron que para textos largos es
bastante recomendable usar fuentes con serifas porque al usarlas
pueden crear párrafos más agradables para leer que cansan menos el
ojo.Anteriormente para pantallas era recomendable usar fuentes sans
serif porque las resoluciones no nos permitían tener unas serifas bien
definidas, pero eso ya no es un problema. Esta característica en una
tipografía ayuda a unificar la lectura entre letra y letra y guía mas el ojo
en la lectura continua. La serifa emula de manera delicada la letra escrita
y hace que la lectura sea mas ágil, por eso es que cansa menos en
textos largos.

En T-Magazine los diseñadores están usando Georgia que es una

fuente con serifas. Es una fuente del sistema pero funciona bastante
bien.
2. Párrafos con ríos o calaveras

El espacio entre palabras en un párrafo debería mantenerse uniforme, de

lo contrario, se forman huecos que se unen a los espacios entre las
líneas superiores e inferiores y hacen “caminos” que llamamos “ríos” o
“calaveras”.

Calaveras en Cromos
Este error ocurre al tratar de justificar totalmente un párrafo. Al pensar en
diseñar textos para web hay que tratar que funcionen como plantillas
para que otras personas agreguen contenido y que el diseño funcione
siempre. Los diseñadores web no podemos ajustar individualmente el
espacio entre letras o entre palabras para una línea de texto específica
como podríamos hacerlo en un impreso, entonces es muy difícil que no
tengamos este tipo de espacios molestos si justificamos totalmente un
párrafo. Para evitar esto lo más aconsejable es justificar a la izquierda.

Sin calaveras. T-Magazine

3. Textos “extracto” cortados

Generalmente en la página de inicio podemos tener la previsualización

de un artículo en una página interna. Es importante que estos textos se
editen para evitar que quede el texto cortado seguido de puntos
suspensivos (…) Aunque es un error de edición se va a ver como un
error de diseño.

Texto “extracto” cortado en Cromos.com

Es mejor escribir un texto que termine coherentemente, sin cortes, y
seguir con la palabra More o la expresión “Leer más” y luego puntos
suspensivos. De esta manera se nota claramente que es un enlace que
nos va a llevar al artículo completo.
4. Ignorar los interlineados y espacios entre letras

Espacio entre letras inadecuado

Si el espacio entre letras es muy pequeño la lectura es incómoda y si es

muy grande veríamos las palabras como letras sueltas. En Cromos las
palabras de los tags están tan pegadas que nos cuesta trabajo ver donde
empieza una y termina la otra.

Espacio entre líneas inadecuado

No tener suficiente espacio entre líneas es un error de diseño para textos

largos porque los párrafos se vuelven incómodos. A veces podemos
tener espacios entre líneas muy reducidos y se ve bien pero este no es
uno de estos casos.
Espacios en artículos destacados en Cromos

Espacios en artículos destacados en T-Magazine

5. Inconsistencias en la guía de estilo de diseño

Es Importante tener una guía de estilos para mantener un diseño

consistente a lo largo de todo el sitio. En el ejemplo incorrecto vemos una
página llamada Especial Cine dentro del sitio con un estilo diferente para
los enlaces y los títulos. Cambian las fuentes y los colores. Es posible
que sea una sección patrocinada y el patrocinador entregó el diseño
hecho sin mantener el estilo del sitio.

Inconsistencia: Cromos.com

Los videos de T-magazine están alojados en un sitio externo a la revista.

Si es necesario romper la consistencia del diseño es mejor evitar hacerlo
sutilmente y dejar que se note como una intención.
La tipografía tiene que crear una buena experiencia de lectura
El objetivo de la puesta en página en una publicación es dejar que el contenido se
lea y que las ideas se transmitan. Muchas veces la buena tipografía es invisible,
porque no se interpone entre nosotros y el contenido que estamos leyendo. El
diseño no se roba la atención y nos deja ver el contenido amablemente, este debe
ser el criterio fundamental que guíe el diseño en lo que toca a la elección y manejo
de una tipografía.Si quieren entender más sobre la invisibilidad de la buena
tipografía les recomiendo leer “La copa de cristal” de Beatrice Warde.