Tipografía para el diseño Web


En los inicios del diseño de páginas web, las posibilidades en cuanto al tratamiento tipográfico era muy limitadas. Por ejemplo, con respecto al uso de familias, únicamente se utilizaban las fuentes llamadas "seguras", instaladas en su ordenador el usuario.


Clasificación básica de familias de fuentes para el diseño web.



El diseñador de información, al trabajar en el soporte digital, ha de ser capaz de organizar, dividir, ordenar e interpretar la información escrita para presentársela de forma atractiva y cómoda al lector. Es necesario aprovechar al máximo los recursos que ofrece la microtipografía y la macrotipografía con el fin de optimizar la legibilidad, la usabilidad y la accesibilidad de un sitio web informativo.

Como dice Olivier Reichenstein, "elegir tipos de letra no es tipografía", y el diseño de información no trata únicamente de usar fuentes tipográficas; trata más bien de cómo usar buena tipografía.

“El 95% de la información que se presenta en la Web es escrita. Es lógico pensar que un diseñador Web debería tener una buena formación tipográfica, ya que es la principal disciplina que trabaja con la información escrita”.  (Olivier Reichenstein)

Las normas básicas de la tipografía son las mismas para el papel que para la web, sin embargo, en la pantalla, la lectura y la visualización de los diferentes elementos tipográficos es diferente, razón por la cual requiere un tratamiento específico. 

Algunos aspectos influyen directamente en la legibilidad de un texto publicado en un sitio web:

CARÁCTER o forma de las letras
Familia: Serif o Sans-serif
Mayúsculas o minúsculas
Estilo o peso de la letra: redonda, negrita, cursiva
Anchura de la letra o fuente
Resolución del soporte

PÁRRAFO o forma de los bloques de texto
Tamaño de las letras
Ancho de columna
Interlineado
Alineación
Espaciado entre letras y palabras
Contraste de color

Aspectos que influyen en la legibilidad del texto en la web.



Con las nuevas versiones de CSS (Hojas de Estilo en Cascada) y con HTML5 es posible indicar al navegador que utilice fuentes que incrustamos o incorporamos en los archivos de diseño de la página web, junto con el código HTML, las CSS o el JavaScript. Estas fuentes son archivos TrueType, con la extensión .ttf.

Con esta propiedad, denominada “font-family”, además de indicar las fuentes que suministramos en nuestros archivos, podemos marcar una fuente genérica, por si hubiese algún problema para cargar los documentos por parte del usuario.

Los grupos de fuentes genéricas o clasificaciones (que abarcan muchas familias existentes) son:
  • Serif 
  • Sans-serif 
  • Monospace 
  • Cursive 
  • Fantasy 

Con la directiva @font-face se indican otras propiedades tipográficas de la página web como el tamaño de la letra, el peso, el estilo o la variación, el espaciado entre letras y palabras, el uso de mayúsculas o minúsculas, la alineación o el sangrado del texto.





Fuentes "seguras"


Hasta hace muy poco tiempo, el diseño tipográfico para las páginas web estaba limitado a las fuentes llamadas "seguras", es decir aquellas que se consideraba tendría instaladas el usuario en su ordenador o dispositivo. 

Al escribir el código HTML mediante editores como Dreamweaver seleccionábamos una serie de fuentes separadas por comas, similares o de un mismo grupo, con el fin de que se visualizaran en el navegador por orden de preferencia.

Se establecen grupos de fuentes por unidad o similitud. Por ejemplo, con serif o remate, sans-serif o lineal, o monospace.
  • Verdana, Geneva, Sans-serif 
  • Arial, Helvetica, Sans-serif 
  • Tahoma, Trebuchet, Sans-serif 
  • Georgia, Times New Roman, Times 
  • Palatino, Linotype, serif
  • Courier new, courier, monospace 


CONSEJOS AL USAR FONTS  EN LA WEB:


  1. Jerarquía tipográfica clara, en tamaños, color, pesos o estilos de la letra 
  2. Limitar al máximo el uso de las familias tipográficas distintas. Elegir muy bien la principal de lectura para párrafos. 
  3. Utilizar adecuadamente el contraste para mejorar la legibilidad 
  4. Elegir el tamaño adecuado para la lectura del texto 
  5. Alinear los bloques de texto a la izquierda. Evitar bloques justificados 
  6. Ampliar el interlineado, para que las líneas de texto se diferencien con comodidad y "respiren". 

INFOGRAFIA DE LA TIPOGRAFÍA


Uso de la tipografía en el diseño web. Infografía de Rodrigo L. Alonso, estudio-gráfico.



LO MÁS VISITADO:

Los elementos de una imagen

Las vanguardias y el desarrollo del diseño gráfico

Infografía de las vanguardias artísticas

Ortotipografía: imprescindible conocer sus normas y usos

Cabeceras de periódicos: Una clasificación tipográfica básica

Cómo crear un proyecto multimedia

La interacción del color: Cuando los colores se relacionan entre sí

El arte del cartel publicitario

Portadas de discos: "packaging" para la música

Infografía en revistas y periódicos

Gráficamente

CONTACTO: ENVIA TU COMENTARIO

Nombre

Correo electrónico *

Mensaje *