La tipografía es un elemento básico y primordial en el diseño editorial para web y para impresión. Es fundamental mantener el aspecto legible de la misma para que sea funcional.

En el caso del diseño de edición web, al necesitar utilizar fuentes del sistema informático no contamos con la gran variedad de tipos que tiene, por ejemplo, la edición impresa. La tipografía se organiza en familias básicas, las más utilizadas en la edición web son tres:

• SANS- SERIF, tipografía sin remate (serifa), también llamada tipografía de palo seco o moderna. Ej: Arial, Helvética o Verdana.
• SERIF, tipografía con remate (serifa) también llamada romanas. Ej: Georgia o Times New Roman.
• MONOSPACE, tipografía en las que todos los caracteres tienen el mismo ancho. Suelen ser muy limpias, y amplias en sus caracteres. Pueden ser con remate o sin remate, pero no resultan muy útiles para trabajar con párrafos largos. Ej: Courier o Courier new.
  

Es importante recordar que existe un etiqueta HTML llamada <PRE> </PRE> (fuente preformateada) que preformatea el texto al que afecta dejándolo sin estilos y convirtiéndolo en monospace.

Este tipo de texto es francamente útil para contenidos técnicos, como ejemplos de código de programación que se encuentran dentro del contenido de nuestra página. Es fundamental preformatear este tipo de textos porque si, por ejemplo, tenemos una página que es un tutorial de un lenguaje de programación y un usuario copia un ejemplo de código de un ejercicio cualquiera, al pegarlo en la aplicación de su ordenador copiaría también los estilos de ese texto (negrita, cursiva, etc.) y el código no funcionaría. De esta otra forma, preformateado, se puede copiar el texto sin que al pegar se hereden los estilos.

Los textos que usen fuentes no estándares, esto es, que no sean de sistema o estén instaladas en nuestro ordenador por defecto, deberán tratarse como imagen (jpeg, gif o png). También podemos utilizar técnicas SVG que nos permiten utilizar cualquier tipografía, de fantasía o, por ejemplo, rotuladas, con gran calidad y capacidad de indexación por los buscadores. Un ejemplo de generador de este tipo de formatos es CUFON.

Existen, además, distintas técnicas para utilizar fuentes diferentes, especiales, mediante las cuales el usuario puede ver en su equipo la tipografía seleccionada por los diseñadores sin necesidad de que esté instalada en su computadora. Nos referimos a la utilización de @font-face, la tecnología typeface.js o incluso el sistema de tipografia gratuito (open source) y alojado en servidor, como el proyecto Google fonts.

Tamaño

La cuestión del tamaño de la tipografía en edición web es bastante compleja. Aunque no aconsejamos utilizar tamaños menores de 9 píxeles, es relevante apuntar que el usuario finalmente puede cambiar a su antojo el tamaño de nuestra página. Los navegadores y sistemas operativos actuales están preparados para ello (por ejemplo, pulsando las teclas  manzana o control y + se amplía, y con manzana o control y –, disminuye). Debemos intentar que en nuestros diseños también se tenga la posibilidad de cambio de tamaño del texto y que este se encuentre perfectamente visible.

Aconsejamos un tamaño de texto entre 10 y 12 píxeles para los párrafo y 9 píxeles para microtextos, créditos y licencias (copyrights).

Para la correcta armonía de la lectura, deberíamos evitar utilizar más de cuatro tamaños de texto. Con cuatro tamaños, se representan cuatro niveles de importancia de la información que se muestra. Lógicamente daremos mayor tamaño a aquellos textos que necesiten llamar más la atención e iremos descendiendo dependiendo de su intensidad, desde el titular al resumen, hasta llegar al párrafo y a la nota de la noticia o incluso a los bloques destacados (blockquote).

Número de fuentes a utilizar

La pregunta de cuántas fuentes utilizar es también compleja. El diseñador de la interfaz será el encargado de tomar esta decisión, pero es importante señalar que las fuentes se deben estandarizar y que no es buena idea utilizar más de 3 tipos diferentes en un mismo proyecto.

Texto e interacción

Es vital cuando estamos haciendo edición web pensar en el texto como algo más interactivo de lo que es en un medio impreso. Por ello consideraremos el texto siempre como un texto con funciones y capacidades de amplificación, expansión, interacción, etc. (hipertexto).

Es recomendable, así mismo, crear funciones HOVER con cambio de colores para resaltar la interacción de los textos,  y utilizar juegos de negativos e inversiones de color con el fondo.

Además, podemos utilizar subrayados (underline), aunque se aconseja no abusar de los subrayados en los enlaces y, si se decide utilizar subrayados como indicación de hipertexto, se debe intentar mantener la coherencia en todo el proyecto, de lo contrario, se puede provocar confusión en el usuario y desestructuración de la información del proyecto.

Uso de mayúsculas

En edición web, es importante no abusar del uso de capitales (mayúsculas) . No debemos de olvidar que el usuario lee en pantalla, directamente del foco de luz, por lo que el abuso de este tipo de letra puede fatigarle y provocar en él un sentido de pérdida de la arquitectura y la jerarquía de la información del proyecto. En conclusión, puede entorpecer la comunicación.

(Sobre el uso de las mayúsculas y la cortesía en internet, puede consultarse: La netiqueta: buenas maneras en la red)

Caracteres tipográficos como icono/signo

Cuidado con el uso de «X» ya que implica universalmente cierre de ventana, al igual que «+» implica ampliación de contenidos. No es recomendable utilizar este tipo de signos cuando queramos trabajar con proyectos accesibles.

Con el uso de caracteres ascendentes «>» y  descendentes «<» debe tenerse mucho cuidado también, ya que se utilizan como indicadores (flecha) de dirección, pase de página o paso al siguiente contenido. Son de gran utilidad y mantienen una capacidad de significación excelente, pero su abuso puede desorientar al usuario.

Es recomendable, siempre que queramos una total comprensión y accesibilidad, que estos signos vayan acompañarlos de las palabras «anterior» y «siguiente» respectivamente. Al emplear estos caracteres convertidos en símbolos es también recomendable, que se les acompañe, si la cantidad de información lo precisara, de caracteres numéricos que indiquen en qué número, anterior o siguiente, se encuentra el usuario.