Tipografía aplicada al diseño web

Veamos las nociones básicas sobre como usar buenos estilos de texto a nuestras páginas web.

En el diseño de páginas web se emplean muchas clases de componentes. Las páginas web tienen como finalidad principal transmitir uno o varios mensajes al usuario de internet, para lo que debe emplear elementos adecuados para lograr este objetivo. Las imágenes y el texto son los elementos más empleados para la mencionada transmisión de ideas, aunque con la aplicación de nuevas tecnologías adquieren cada vez más fuerza otros tipos de elementos, como los sonidos y los videos.

Esta transmisión de ideas en imágenes y texto se produce en forma totalmente diferente. Mientras que a través de la imagen puede accederse en forma mucho más rápida al mensaje o la idea que se quiere transmitir, el volumen y la profundidad de conceptos que pueden transmitirse con el lenguaje escrito en un mismo espacio es muchísimo mayor, por lo que ambos elementos resultan necesariamente complementarios para lograr una buena comunicación.

Integración de los textos en el diseño

Es frecuente encontrar en las páginas web un párrafo precedido de un elemento gráfico, generalmente una imagen. Este tipo de configuración es muy eficaz y consiste en llamar la atención del usuario sobre el elemento gráfico para luego completar la exposición de la idea mediante el empleo del lenguaje escrito. Veamos un ejemplo:

Apreciarán que lo primero que se distingue en este diseño, es cada una de las imágenes dispuestas junto a cada texto. Sin embargo, para poder comprender adecuadamente lo que se pretende transmitir, luego de haber sido seducidos por la imagen debemos leer el texto que se encuentra junto a ella.

Vista una página desde el punto de vista estético y en su conjunto, los textos se comportan también como un elemento gráfico, y poseen ,además, algunos atributos que comparten con éstos, como color, tamaño y forma. Es muy frecuente que elementos gráficos como imágenes o fotografías, cuenten con texto como parte de los mismos. Teniendo en cuenta todo esto, es obvio que no debemos considerar a los textos solo como el método de desarrollar una idea, sino que además debemos incluirlo en el diseño de la página desde el punto de vista gráfico. En la antigüedad, la escritura estaba formada por la representación de objetos, y en muchos casos, como las pinturas y relieves del antiguo Egipto, la escritura ya formaba parte del diseño estético de muchas obras de arte.

Tamaño, tipo. legibilidad y color de la tipografía

Tamaño de las fuentes

La escala para determinar los tamaños de las fuentes tiene una historia tan larga como la historia de la imprenta. En el diseño web, así como en el uso de fuentes en programas informáticos, se emplean los siguientes tipos de escalas para determinar el tamaño de las fuentes o tipografías como puede verse en el siguiente artículo. En el mismo artículo se puede además observar cómo se pueden determinar otros atributos de las fuentes, como la tipografía, el color y el grosor.

La determinación correcta del tamaño de las fuentes es muy importante, tanto para obtener una buena legibilidad de los textos, como desde el punto de vista estético. Existen muchas formas de establecer los tamaños de las fuentes, pero la más recomendable es establecer un tamaño de fuente para toda la página y luego hacer variaciones del tamaño empleando porcentajes o ems.

Las medidas más aconsejables para los textos, es de 11 puntos para la fuente y 13 puntos para el interlineado, ya que brindan una lectura descansada.

Tipos de fuentes

Dadas las características especiales de la visualización de textos en monitores, existen algunas consideraciones a tener en cuenta a la hora de establecer los tipos de fuentes con los que se visualizarán los textos de nuestra web. Existe controversia entre los especialistas en el tipo de fuente que es más legible. Mientras que algunos sostienen que las fuentes del tipo Serif (Times New Roman o Georgia) son más legibles, mientras que otros, la mayoría, sostienen que lo son las fuentes del tipo Sans Serif (arial, verdana, tahoma).

Lo más conveniente es el empleo de una sola fuente, o dos,  para toda la página para luego modificar los atributos de la misma, de forma de poder establecer diferencias entre los diferentes tipos de texto (títulos, subtítulos, párrafos, etc.) que se establecerán en la página. En algunas ocasiones, dado que el diseño lo requiere, es posible que se deban establecer más de un tipo de letras, pero aún en este caso es conveniente limitar al mínimo la cantidad de fuentes utilizadas.

Se debe tener en cuenta que los navegadores y sistemas operativos soportan tipos de letras diferentes, por lo que será necesario establecer un tipo de letras y algunos suplentes. Esto se establece en el CSS de la siguiente manera:

font: italic bold 18px arial, helvetica, verdana;

Debe tenerse en cuenta que cada tipo de letra designado debe estar separada de las otras por una coma. Estableciendo las fuentes de esta forma, si el navegador no encuentra una fuente, establecerá la siguiente. Si el diseño requiere un tipo de letra determinado, el suplente debe tener características similares.

Legibilidad de la tipografía

Un aspecto importante en el diseño web es la legibilidad de los textos, ya que la dificultad para leerlos puede hacer que el visitante opte por retirarse de la página.

Por norma general se acepta que aquellas tipografías diseñadas para mejorar la legibilidad en los textos impresos no son convenientes para los textos de la web, ya que contienen elementos que necesitan de resoluciones mayores que las que ofrecen los monitores.

Para esto se han diseñado algunas tipografías que resultan particularmente útiles para ser aplicadas en el diseño de elementos que se van a visualizar en monitores, entre ellos las páginas web. Estas tipografías son, por ejemplo, Tahoma, Verdana y Georgia, que permiten una fácil lectura aún cuando se empleen tamaños pequeños. Veamos dos ejemplos de texto con tipografías de atributos iguales (pequeño tamaño) con excepción del tipo de fuente. En el primero se emplea Times New Roman, mientras que en el segundo es Arial:

Este es un texto
escrito en letras
de pequeño tamaño

Este es un texto
escrito en letras
de pequeño tamaño

Tampoco resulta conveniente el empleo de tipografías diseñadas con ornamentaciones, ya que las mismas pueden resultar de dificultosa lectura en tamaños normales o pequeños. Este tipo de fuentes ornamentales son útiles solo para emplear en los títulos y como parte de los gráficos.

También es importante recordar que muchas tipografías, a pesar de estar diseñadas para su empleo en informática, no se encuentran estandarizadas, por lo que algunos ordenadores podrían no visualizarlas, empleando en su lugar la tipografía que viene “por defecto” en el navegador.

Otro aspecto que influye en la legibilidad del texto en una página web es el uso de mayúsculas. Hay diseñadores web, generalmente novatos, que tienden a usar las mayúsculas como recurso para enfatizar textos en las páginas web. Para palabras sueltas es un recurso respetable, pero para frases o párrafos enteros, más que enfatizar dificulta la lectura por lo que el efecto se pierde. Mira este ejemplo:

LEE ESTE TEXTO ESCRITO EN MAYÚSCULAS Y VALORA TÚ MISMO SI CUESTA MÁS LEERLO QUE UN TEXTO NORMAL O NO.

Color de la tipografía de una web

El color de las tipografías, si bien deben integrarse con el resto del diseño, no debe rebajar la visibilidad de los textos. Para obtener una buena legibilidad de los textos que se publican en una página web, el color que se emplea en las fuentes debe contrastar nítidamente con el color del fondo donde es colocado. Un bajo contraste, hace que el texto se vuelva difícil de leer.

En el siguiente ejemplo, el color de los textos resalta claramente del fondo, de forma que se vuelve muy sencilla su lectura, haciendo que los usuarios puedan acceder a estos contenidos con total comodidad.

Las fuentes pueden tener diferentes grosores, pero las letras cuyo grosor es mayor a lo normal, solo deben ser empleadas en caso de que se quiera resaltar una parte del texto, ya que su uso continuo también resulta ser una dificultad para la lectura.

Disposición de los textos en una página web

En aquellos sitios donde se debe colocar textos de gran extensión, es conveniente que el mismo se encuentre dividido en párrafos no muy largos, de modo que el usuario pueda realizar un rápido recorrido por el texto y no se “pierda” con facilidad.

Además es aconsejable la utilización de diferentes niveles de titulación (<h1> <h2> <h3>, etc.) para ordenar la secuencia de los textos, lo que también facilita al usuario encontrar aquellas partes del texto que le resulten más atractivas.

Un ejemplo de ello es este mismo artículo, en el cual puede apreciarse la división en párrafos y la colocación de subtítulos, de forma que sea realmente sencillo orientarse en el texto, hacerse un resumen de los temas que se tratan y encontrar los mismos con facilidad.

La disposición en párrafos sirve además como elemento decorativo. La inclusión de un texto de grandes dimensiones puede hacer que el conjunto pierda estética. La inclusión de títulos y subtítulos con fuentes, tamaños y colores diferentes al resto del texto, no solo hace que sea más sencillo y agradable leerlos, sino que además, haciendo una correcta utilización de estos atributos, se colabora en el embellecimiento de la página.

También es útil la creación de listas, ya sean ordenadas / numeradas <ol> o desordenadas / sin numeración <ul>. Las listas se leen muy bien en pantalla, son fáciles de escanear y atraen la atención de visitante.