Desarrollo web

¿Que tipo de fuentes son más legibles, "serif" o el "sans-serif"?, ¿qué ancho de línea debería utilizar para facilitar la lectura a los usuarios de mi web?, ¿alineo el texto, lo justifico...?.

Bueno en este apartado vamos a intentar ayudaros a solucinar estas dudas.

Formato "serif" y "sans-serif"

Los formatos de fuente "serif" son aquellos que las letras tienen unos pequeños remates en los extremos, por ejemplo:

Times New Roman es un tipo de letra "serif"

Las fuentes "sans-serif" son aquellas sin esos pequeños remates en los extremos, por ejemplo:

Arial es un tipo de letra "sans-serif"

Varios estudios han demostrado que sobre papel impreso las fuentes "serif" son más legibles, ya que esos pequeños remates en los extremos dan más información sobre los caracteres y facilitan la lectura.

Sin embargo en los monitores, por su menor resolución en comparación con el papel, los pequeños remates aparecen menos definidos y lo que hacen es dificultar la lectura, por lo tanto, en la web es más recomendable utilizar fuentes "sans-serif".

El Ancho de línea

Cuanto menor es la longitud de línea, mayor es la velocidad de lectura (esta es la razón de que los periódicos presentan su información en columnas).

Una mayor longitud de línea requiere de un salto de mayor longitud de un punto de fijación ocular al siguiente. A mayor longitud del salto, más inexactitud en la siguiente fijación y por tanto mayor será la dificultad de lectura.

Aunque no existe una recomendación única en cuanto a la longitud máxima de línea se suele hablar máximo correcto entre los 60-70 caracteres.

Además, en líneas muy cortas es importante la distribución de las unidades de significado, como se puede ver en este ejemplo tomado de Jarret, C. (vía Nielsen, J. 2000):

Ajuste del espacio entre letras (kerning)

El espacio entre las letras de una misma palabra (kerning) no debería ser siempre fijo. Cuando este espacio se ajusta correctamente, los textos son más legibles y el aspecto estético es mucho mejor. El "kerning" es lo que da ese aspecto tan profesional a los libros impresos. Sin embargo, en los navegadores es imposible de regular (incluso en algunos programas de edición tampoco), ya que no ofrecen esta posibilidad. Ahora bien, es un aspecto que podeis tener en cuenta a la hora de trabajar vuestros imágenes de titulos de sección o textos incluidos en una imágen.

Ej: El ajuste varía según las combinaciones de letras que van juntas, por ejemplo en la silaba "To" la "o" debe entrar unos pocos píxels debajo de la "T" como se puede ver en la imagen 1.

-Imagen 1-

Fuentes proporcionales y no proporcionales

No debemos confundir el kerning con el ajuste del espacio que ocupa cada letra.

E xisten dos tipos de fuente: las proporcionales y las no proporcionales (monospaced). En las proporcionales este espacio depende del caracter, por ejemplo una "i" ocupa menos espacio que una "M". En las fuentes no proporcionales todos los caracteres ocupan el mismo espacio. Por ejemplo:


Arial es una fuente proporcional

Courier New es una fuente no proporcional

La mayoría de los medios escritos: periódicos, libros y websites usan fuentes proporcionales.

Las no proporcionales (monospaced) son adecuadas para el mostrar muchos datos ya que ofrecen lecturas mas claras en listas de datos, tablas, calendarios, etc... También son más adecuadas para la entrada de datos en las cajas de texto de formularios porque es mas fácil ver los errores por la mayor separación entre letras.

El espacio en blanco entre varias letras, aparte de escogiendo el tipo de fuente puede controlarse mediante la utilización de hojas de estilo.

Color y contraste con el fondo

La combinación más adecuada para el 90% de los casos es texto negro sobre fondo blanco. En todo caso, si decides utilizar color en el fondo, es consejable utilizar colores suaves y claros y siempre un color de texto oscuro, por supuesto, las cabeceras de un sitio web son una excepción.


Alineación del texto

Para los textos largos se recomienda alineación a la izquierda puesto aunque es posible la justificación mediante hojas de estilo, pueden existir casos en los que no funcione correctamente.

El problema es que al justificar un texto se modifica el espacio entre palabras y/o caracteres, lo que hace los textos menos legibles y provoca que algunas palabras con mayor espacio entre sus caracteres sean involuntariamente enfatizadas, además, al contrario que en el papel impreso, puede suceder que la longitud de línea no sea fija (si hemos maquetado nuestra web utilizándo tablas en porcentaje osi no definimos el tamaño de texto en la hoja de estilos)a diferentes resoluciones o diferentes tamaños de visualización del texto, no es posible saber la longitud de línea que verá el usuario y por tanto la justificación no funcionará bien.


Negritas

Las negritas ("bold") deben utilizarse solo para enfatizar algunas palabras, resaltar puntos clave dentro de la información o resaltar alguna frase de gran importancia. Si son utilizadas correctamente ayudan a ojear rápidamente el texto y facilitan la rápida comprensión de la información.

Las negritas llaman poderosamente la atención dentro de un texto e incluso distraen seriamente, por ello nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. En algunas webs por ejemplo se suele escribir en negrita el nombre de la empresa siempre que aparece, lo que no aporta absolutamente nada.

Tamaños de la fuente.

Un tamaño de entre 10 y 13 puntos suele ser el más adecuado para la mayoría de textos en la web, a excepción de titulos y nombre de apartado, en los que perfectamente puede utilizarse un tamaño superior..

Uso de mayúsculas.

Las mayúsculas son mucho más difíciles de leer que las minúsculas por ello no son recomendadas para textos largos sino para palabras sueltas. Su capacidad de resaltar dentro de un texto le hacen un recurso muy valioso para captar atención sobre un elemento de información.

Otras apreciaciones

• Un documento no debería utilizar más de dos fuentes diferentes.


• Las cursivas son muy poco legibles y son poco recomendables, solo deberian utilizarse para unas pocas palabras y en caso necesario con fuentes de tamaño suficientemente grande.


• El subrayado es un recurso que en papel impreso se utiliza para enfatizar, sin embargo en la   web no se debe emplear con este objetivo ya que da lugar a confusión con los vínculos.


• Las viñetas (bullets) y sangrías (indent) son recursos útiles para estructurar la información, separar conceptos, subordinar unos a otros, crear dependencias, etc. Bien utilizadas mejoran la  comprensión y facilitan la lectura de un texto.