Estrategias > Composición > Tipografía Web > Recomendaciones tipográficas generales para la Web

Recomendaciones tipográficas generales para la Web

septiembre 18, 2013

Cascading Style Sheets, Lecturabilidad, Legibilidad, tipografía, Visibilidad

La elección de la tipografía y su tratamiento en un contenido digital resulta esencial para lograra adecuadamente los objetivos de comunicación.

Recomendaciones
Podemos sintetizar algunas de las principales recomendaciones en las que coinciden la mayor parte de los autores y diseñadores profesionales en las siguientes:
- Priorizar la legibilidad por encima de todo
- Usar fuentes sans-serif para mostrar en pantalla
- Usar medidas relativas (porcentajes, “ems”) e integradas en CSS (nunca píxeles)
- Alto contraste letra-fondo
- Evitar fondos excesivamente llenos
- Reducir, al mínimo, los textos en movimiento, en mayúsculas (según las reglas de //Netiqueta//equivale a gritar, y está demostrado que reducen la velocidad de lectura en un 10%) y el texto gráfico.
- No utilizar “cursivas”
- Preferentemente, usar colores seguros para la web
- Fuentes “seguras”: Arial, Verdana y Georgia.
- Evitar utilizar, durante el diseño, textos falsos (como el famoso “lorem ipsum”, para poder detectar problemas de legibilidad/comprensión en el texto real.
- Evitar el uso de anti-aliasing (suavizado de los bordes dentados de las formas y el texto basado en vectores) pues tiende a generar textos más borrosos.
Los autores más puristas insisten en la permanencia de determinadas reglas, como, por ejemplo, que los textos enlazados vayan en azul y estén subrayados. No obstante, hay que señalar que sobre esto, considerando los hábitos actuales de los internautas, existe cierta controversia.
Reglas
Podemos decir que, cuando alguien visita un sitio web que hemos diseñado, lo más probable es que por encima de los colores, imágenes o sonidos, se base en el texto para encontrar aquello por lo que visita el sitio web. Esto debería hacer que la tipografía, el arte de la organización del tipo, sea una prioridad para cualquier diseñador web. Así y teniendo en cuenta las recomendaciones referidas anteriormente, podemos tener en cuenta 10 reglas básicas en el desarrollo de un proyecto web:
1. Debe leerse el texto íntegramente: si un diseñador no comprende la gran mayoría del texto, tendría dificultades para reunir la tipografía que hace que el sitio realmente funcione. Motivo por el cual el diseñador debe leer lo que escribe para poder determinar la tipografía que mejor se adapte a aquél. Algunos diseñadores de páginas web creen que sólo con copiar y pegar un archivo de texto quedan completadas todas las funciones textuales. Si bien, debemos tener en cuenta que cuando se lee un texto ha de proporcionarse al menos una idea básica de cómo puede ser integrado en un sitio web, evitando la desconexión entre la escritura y el diseño del mismo; se busca una lectura fácil de la línea textual, evitando que lleve demasiado tiempo leerlas y que resulte engorrosa su lectura.
2. Volcado de Lorem Ipsum, tan pronto como sea posible: El sitio web es muy dependiente de la palabra escrita así como de palabras muy específicas. El cuerpo del texto en sí puede suponer que se le preste una especial atención con una letra capital y alguna que otra modificación del mismo, atención que podría no ser posible con el denominado “lorem ipsum” (texto falso). A menos que el texto sea en realidad lorem ipsum, el texto de relleno no tendrá ninguna similitud con la realidad. Esto significa que cualquier ajuste podría hacer que el texto o el diseño que lo rodea tengan que esperar hasta que se consiga una visión real. Preguntar y obtener el texto por parte del usuario tan pronto como sea posible en el proceso, supondrá una gran capacidad para ajustar el diseño y la tipografía en su conjunto.
3. Mostrar una clara jerarquía: Cuando se visita una página web, uno debe saber de forma casi inmediata dónde debe comenzar a leer. Utilizando la tipografía se puede establecer una jerarquía clara entre los distintos conceptos que se representan en la web. Cada sitio tiene una jerarquía bien desarrollada con indicadores de por dónde y cómo se debe empezar a leer. Al pensar sobre el tamaño y tipos de letra, se puede resaltar un trozo de texto como si de un titular se tratase, predominando sobre el resto del texto a tratar.
4. Mostrar atención a la Macro y Micro-tipografía: Cuando hablamos de Macro-tipografía nos referimos a la estructura general de su tipo, la forma en que aparece en el contexto de su diseño y su estética, se considera el texto como un bloque en sí mismo. Es la oportunidad para que el texto sea visto de forma atractiva en su conjunto, para lo cual juegan un papel fundamental la elección de los tipos de letra y colores. Mientras que si hablamos de Micro-tipografía nos estamos preocupando más por los detalles de la separación, las cuestiones que determinan si las palabras son fáciles de leer. Así la Micro-tipografía se convierte en una necesidad absoluta cuando tratamos de configurar un texto en sí mismo: si no es legible, no tiene sentido.
5. Hay que tener especial cuidado con los colores de tipo: Cuando un diseñador de páginas web trabaja con el tipo de color, la atención del internauta se considera absolutamente necesaria, por lo que deben tenerse muy en cuenta las combinaciones de colores de la página; por ejemplo, si escribimos un texto en color rojo sobre un fondo rojo no será fácilmente legible, lo que provocará la desatención del usuario. La solución más fácil para esta situación es asegurarse de que el color de su tipo es totalmente diferente al del fondo sobre el cual se asienta.
6. Las Cascading Style Sheets (CSS) han de ser tomado realmente en serio: Estas Hojas de Estilo en Cascada consisten en un mecanismo que detalla la forma en que va a mostrarse un determinado documento en la pantalla del ordenador, cómo se va a exponer la información que el mismo contiene o incluso cómo va a imprimirse el mismo. Si la CSS es clara, el usuario puede moverse entre las páginas de un sitio web sin problemas, así como garantizar la coherencia de la tipografía de la cual se compone el mismo. También podemos afirmar que si se rompe en un pequeño lapso la coherencia del texto en sí, podríamos conseguir dar importancia a lo que realmente queremos destacar, consiguiendo un diseño efectivo.
7. Picar el texto de forma centrada: La elección de una alternativa al texto centrado puede hacer que un sitio web sea fácil de leer, evitando así una posible distorsión del resto de los diseños de diversas pantallas que se presenten en la web. En algunos círculos, el tipo de centro es sólo un paso hasta el uso de la Comic Sans en un diseño de página web. Es posible que se considere por un título, pero en general, la alineación del texto a la izquierda hará que los lectores se sientan mucho más cómodos leyendo.
8. Problemática a la hora de tratar con las comillas tipográficas y otros símbolos: Muchos sitios web están llenos de símbolos que un navegador no puede mostrar ya que la mayor parte de un texto creado por un diseñador de páginas web probablemente se hubiese realizado con el programa Microsoft Word u otro programa de software de procesamiento de palabras, chocando en ciertos aspectos con el lenguaje HTML. Así nos podemos encontrar con diversos problemas como el uso de las comillas tipográficas o trabajar con un texto que ha sido escrito en otro idioma, lo que conllevaría tener que efectuar modificaciones posteriores. Por todo ello, a la hora de desarrollar el diseño de nuestra página web, debemos centrarnos en elegir aquel texto que mejor se vaya a ajustar a nuestro diseño, y viceversa; así, si queremos que, por ejemplo, las comillas se reflejen en nuestra web, deberemos romper con las entidades HTML.
9. Idear un planteamiento para que el texto aumente: Al aumentar el tamaño del texto en la página web podemos crear una mejor visualización del mismo y conseguir así una mejor lectura. Podemos considerar usar una fuente de tamaño 10, dado que la mayoría de la gente está acostumbrada a la lectura de fuentes de este tamaño. No debemos olvidar que el tamaño del navegador puede variar de forma drástica, ya que los distintos usuarios pueden tener configurada la visión de los mismos de formas muy variables y distintas, por lo que el diseño del texto tiene que ser capaz de adaptarse a ese hecho a fin de no distorsionar el propio diseño en sí.
10. Mostrar una preferencia por la tipografía sans serif: Si echamos un vistazo a los distintos sitios web de la red, casi todos los grandes bloques de texto se fijan en un tipo de letra sans serif, mucho más fácil de leer. Aspecto que destaca sobre todo en los titulares y otros bloques más pequeños de texto, creando lo que podemos llegar a determinar como un equilibrio entre los dos.
Resumen
Estos diez pasos pueden resumirse en tres premisas básicas que han de ser tenidas en cuenta a la hora de elegir una tipografía para la web:
- Grado en que las letras pueden distinguirse unas de otras.
  Fuentes más visibles:
  - Blanco interno de mayor tamaño (ojo medio)
  - Tamaño individual de las letras
  - Rasgos del diseño de algunos tipos
  - Grosor
  - Color y contraste.
- Rapidez con la que el ojo identifica un carácter, letra, palabra o grupo de palabras.
  - Tipógrafo: necesidad / expectativas lector.
  - Métodos:
    - Tiempo de lectura.
    - Control del movimiento del ojo y parpadeos.
    - Distancia de lectura
  - Depende de muchos factores: letras mayúsculas o minúsculas, del número de palabras por línea, cursiva, negrita, si hay muchos números o signos de puntuación, grafía con remates…
- Facilidad y confort con la que un texto es leído.
  - Interés del lector.
  - Forma, tipo y texto.
  - Tamaño tipo.
  - Ancho de línea.
  - Espacio / interlineado.
  - Contraste cromático.
  - Calidad de reproducción.