Una buena tipografía en una página web, es tan importante como en cualquier otro medio. El hecho de que aparezca en una pantalla y no sobre el papel, en forma impresa, no debería hacer ninguna diferencia, puesto que debe ser agradable a la vista así como también de fácil lectura.

En cada situación donde se necesita utilizar de la tipografía (publicidad, packaging, tv, firmas, etc) el diseñador, tiene que adaptar sus técnicas para adecuarse al medio.
        Un estilo de titular, que funciona bien en una revista, no necesariamente funciona en un poster.
        Una revista generalmente es vista en una posición vertical, de forma perpendicular al largo del brazo del lector, y por ello el espaciado puede ser más ajustado, y aún así, el texto podrá ser perfectamente leído.
       En un poster, tenemos un punto de vista distinto, donde usualmente, se distorsiona la tipografía por su ubicación. Es por eso que un espaciado extra ayuda a una mejor identificación de los caracteres.

Diseñar para las pantallas de computadoras tiene su propia serie de problemas e inconvenientes. Agrenguele a este hecho, la naturaleza elástica del medio (espacio web) el cual afecta a distintas plataformas en los sistemas operativos, y las resoluciones en pantalla de los sitios web, y verán cómo los problemas se multiplican.
        Ahí es dónde aparece la labor del diseñador, para mantener cierto control cuando todo lo demás empieza a fallar.

El primer problema es que el largo de las líneas son muy largas. Al imprimir, hay una relación entre el largo de línea y el "leading" o espacio entre líneas.
        Si la línea es muy larga, y el leading muy ajustado, es dificultoso leer desde el final de una línea hasta el principio de la siguiente (las líneas deberán ser leídas dos veces o directamente obviadas).
        Para evitar este problema, lo que se hace es utilizar un interlineado que puede ir desde la mitad hasta el doble espaciado. Pero, cuando se trata de un diseño para la web, no podemos darnos estos lujos. No hay conceptos de "leading" en el código html. La solución? CSS: Hojas de estilo.

Si bien no podemos controlar el espacio entre líneas con html, podemos si, asegurarnos que que dichas líneas no sean demasiado largas.
        Restringiendo el ancho de las líneas de texto con un BlockQuote para tener un margen izquierdo más ancho, logramos una mejor lectura. Así mismo podemos hacer uso de las tablas para separar el texto en columnas más estrechas.

Otra forma de tener control es utilizar la envoltura suave que se establece por defecto (soft wrap) y poner el conocido <BR> break, o retorno de carro, para separar más aún nuestros párrafos.
        Esto nos permite, mantener líneas cortas, y controlar las formas tipográficas desde el margen izquierdo. Ahora bien, vamos a necesitar mayor espacio horizontal para compensar el hecho de que los caracteres pueden verse mayores en otro monitor.

Las especificaciones de html, nos permiten una gran jerarquía en las medidas de los titulares. Estos tamaños son más bien relativos que absolutos y se muestran en negritas (bold); aunque realmente no se ven muy atractivas.

Y aquí debemos hacer una distinción importante: Hay tipos que son diseñados para verse especialmente en pantallas y otros que son el resultado de un cálculo y el consecuente ajuste, de un tipo básico.

 

Hay varias formas de priorizar la información en tipografía tradicional, pero muchas de esas opciones no se ajustan al diseño web por la baja resolución del medio.

Por ejemplo, utilizar el color para jerarquizar, en vez de utilizar tamaños para las fuentes, puede ser más efectivo.

Con una "fuente para pantalla", el diseñador ha considerado cada caracter individualmente, a un nivel de pixeles, y ha optimizado las formas de ese caracter para que funcionen dentro de los límites determinados de una grilla.
        Las fuentes deberían ser diseñadas en un rango específico de tamaños: 8,9,10,12,14, etc. Si especificamos un tamaño distinto, vamos a obtener una fuente "calculada", la cual, se aproximará al tamaño elegido, pero perderá todos los detalles de su diseño.

IAl producir para la pantalla una versión que originalmente se creó para ser impresa, el diseñador deberá mantenerse lo más cercano posible al diseño original, en favor de una apropiada visualización en dicho medio.

Las fuentes en negrita, (bold) usualmente se calculan en base a un algoritmo que agrega pixeles extras alrededor de los bordes de una fuente diseñada como romana o redonda.
        Entonces si tenemos un mix o combinación de tamaños y densidad NO DISEÑADOS para pantalla empezaremos a ver el texto bastante desprolijo y falto de homogeneidad.
        No solo son las formas las que se verán afectadas sino también el *"tracking" y el "kerning".

Itálicas: Lo mejor es evitarlas. Son absolutamente incompatibles con la grilla de pixeles que nos brinda el monitor de un ordenador. Es por ese motivo que siempre se ven bastante desagradables, especialmente en tamaños pequeños.

Mucha gente utiliza gráficos para titulares. Estos se puede crear con Photoshop o cualquier otro programa para gráficos, y exportarse como archivo GIF, obteniendose así un aspecto más limpio y personalizado.
       Tal vez, la página se cargará más lentamente, y hasta deberá considerarse la posibilidad que el usuario navegue sin gráficos, para lo cual, es indispensable el uso de los tags ALT y señalar así los gráficos que contienen texto.

Hay algunos otros trucos tipográficos que en html son más difíciles de implementar, ya que el código solo nos permite un solo espacio entre dos caracteres.
        Y aunque podemos utilizar un espaciado discreto, cuando se trata de espaciar palabras ya se complica aún más si necesitamos dos o más espacios.
        Usando por ej: '&nbsp;' se pueden forzar espacios extra entre caracteres o palabras.
        Para simular un TAB: <BR>&nbsp;_&nbsp;_&nbsp;_&nbsp;_ donde el guión bajo representa un espacio regular.

       Para obtener mayor espaciado entre líneas, se pueden combinar alterndos, los tags<BR>&nbsp; y <P>&nbsp;.

El lenguaje HTML soporta las reglas horizontales que puden ser utilizadas como separadores de bloques de texto. En tipografía tradicional, el uso de dichas reglas no es muy bien visto, mientras que por el contrario en la web muchas veces nos permiten realzar algun layout un poco consistente, siendo el uso más decorativo que en función del estilo.
        Hay que tener en cuenta que cada navegador tiene un tratamiento diferente para las reglas, aunque esta premisa se aplica a casi todos los elementos decorativos de una página web.
        Por otra parte, podemos considerar la utilización de un gráfico como regla: Siempre teniendo en cuenta una correcta optimización del mismo, para que solo tengamos un color, el cual utilizaremos ajustando el ancho del gráfico, en el atributo IMG SRC, ya sea en pixeles o porcentajes.
        Think of rules as 'typographic crutches'. On a Web page, there are no space constraints. It is better to use space to separate elements than lines.

Para crear un caracter, ya sea en mayúsculas o minúsculas, debemos saber que necesitaremos por lo menos cinco pixeles de alto. Considerando las ascendentes y descendentes, esa medida se eleva a nueve pixeles.
        Por ese motivo, debemos si tenemos una fuente para pantalla, esta deberá contar con esos cinco pixeles, si son todas letras capitales, y con nueve si tenemos mayusculas y minúsculas también.

 

Algunas de las fuentes más actuales como ser Verdana, Georgia y Trebuchet, han sido diseñadas especialmente para pantalla, y es por eso que se ven bien en cualquier diseño web.         No solo las formas, sino también el cuerpo y el espaciado entre los caracteres se han tenido en cuenta, para que coincidan con la grilla natural de los monitores, lográndose así, un grado de legibilidad óptimo.

MINI 7 es una fuente para pantalla originariamente diseñada en base a la Mac 7, la cual es una fuente basada en un mapa de bits (bitmap font), sin bordes para impresoras (outlines) y exclusiva para su uso en monitores. Solo tenía un conjunto de caracteres básicos, y era de uso libre. Habiendo muy pocos programas que utilizan fuentes exclusivamente en mapas de bits, ésta rápidamente se vio superada.
        Luego de numerosos pedidos, MINI 7 conforma una familia completa (con versiones expandidas y condensadas) tanto para Mac y PC, en formato TrueType y por lo tanto puede ser utilizada tanto en programas de edición de imágenes o vectores.
        Es ideal para botones, y todo aquello para lo cual necesitemos pequeños caracteres (elementos de navegación por ej.)
        La fuente no posee caracteres en minúsculas, ya que se requieren más cantidad de pixeles para resolverlos apropiadamente, aunque sí cuenta con los caracteres acentuados (tan útiles para nuestro idioma)*

Más detalles en la página exclusiva de MINI 7.

En las pantallas de cualquier Macintosh existe una correlación directa entre el alto en pixeles y el tamaño en puntos: es decir, que una fuente de nueve pixeles de alto es efectivamente una fuente de nueve puntos.
        Los monitores de Mac trabajan en base a 72 pixeles por pulgada, por ende, cada pixel, es un punto cuadrado. Para comprobarlo solo basta utilizar la regla que muchas aplicaciones traen para medir los elementos en pantalla. Así mismo, en la actualidad este principio ya no es tan absoluto, desde la introducción en el mercado de los monitores multi-scan.
        Cambiando la resolución de pantalla de 640 x 480 en un monitor de 14" a 800 x 600 en el mismo monitor, nuestros pixeles serán proporcionalmente más pequeños, y las pulgadas o centímetros en la regla de la aplicación que utilicemos para efectuar una medición, serán menores también.

Las fuentes para PC son diferentes porquese basan en el concepto WYSIWYG (what you see is what you get: lo que ves es lo que obtienes) y es por eso que una pulgada en pantalla es una pulgada. En una PC la medida de una pulgada es igual a 96/72, es decir, 1,3 pulgadas aproximadamente, porque Windows considera que una pulgada equivale a 96 pixeles.
        En un monitor VGA de 14 pulgadas con resolución 640 x 480, los pixeles individuales no pueden ser menores, entonces, las pulgadas son más grandes.
         El efecto resultante es ver las fuentes en PC a una proporción de un tercio menor de lo que se podría ver en una Mac: en PC una fuente de 9 puntos equivale a la misma fuente pero de 12 puntos en Mac.

Una PC con pantalla de 14 pulgadas a 800 x 600 tiene físicamente, pixeles menores, y por ende, esa medida virtual o lógica de la pulgada, se aproxima más a tamaño real.

El resultado de esto es que una fuente, especificada a 7 u 8 puntos en una PC estará bien formada y se verá en Mac como una fuente pequeña, de 9 puntos (la más pequeña que acepta el sistema).
         Tienen así, el mismo tamaño en pantalla a la misma resolución. Las diferencias se verán solamente al momento de imprimir un documento, por ej. ya que en PC la fuente será reducida para corregir esos 8 puntos de alto y en Mac a 9 puntos.

Existen dos formas para especificar una fuente en una página web. Se puede utilizar el tag <FONT FACE>, pero hay que considerar que dicho tag ira desapareciendo, con el correr de los años (no en mucho tiempo más) y por ende recomiendo siempre el uso de las hojas de estilo (CSS: Cascade Style Sheets) para asegurarnos la compatibilidad en el futuro.

También hay que tener en cuenta que es posible que los lectores no tengan intalada en sus máquinas la fuente utilizada en la página web, y por eso es recomendable utilizar las fuentes estandard.

En nuestra hoja de estilos podemos definir ciertas fuentes alternativas, separadas por comas (también en el tag <FONT FACE>) para que el navegador utilice la primera fuente de dicha lista que si este instalada en el sistema de nuestro visitante.
        Si no coincide ninguna, el navegador opta directamente por la fuente por defecto.

Otro punto a considerar es que tanto los usuarios de Mac y PC poseen distintas fuentes instaladas: hay que proveer las fuentes equivalentes para ambos sistemas.
        Para los casos que tengamos que incluir alguna fuente más exótica, hay que incluirla en el primer lugar de nuestro listado, seguida de las alternativas equivalentes, y por último la fuente más segura posible.
        Al decir exótica, simplemente me refiero a fuentes que no están instaladas por defecto y pueden no estar disponibles para algunos lectores.
        MS IExplorer instala un set de fuentes propias de Microsoft, en Mac, a manera de unificar con las instaladas en Windows. Los que no son contemplados, son los usuarios de Netscape.
        Muchos programas populares para PC instalan fuentes TrueType adicionales, pero también deben ser utilizadas cuidadosamente, ya que no todo el público podrá verlas, por no haber adquirido ese paquete de aplicaciones en particular.

Mac incluye un set básico de fuentes, que aquí mostramos.
        A pesar de eso, hay muchos usuarios que incrementan notablemente esa cantidad, de forma que tampoco se puede contar con eso.
Lo importante es definir a quien apunta nuestro sitio web. Preguntarnos si serán usuarios de PC o Mac, es un buen punto de partida.

 

Para el caso que necesitemos de un titular especial, con una fuente muy específica siempre podremos recurrir a un gráfico, bien optimizado. Por ejemplo utilizando un archivo gif, de 4 bits, que contenga el texto en un solo color, con un simple anti-aliased.
          Esto no solo es simple de hacer sino que no recargará en absoluto el peso total de la página.
          No olvidarse de incluir el texto alternativo dentro del tag <ALT> para que aquellos navegantes que hayan desabilitado las imágenes de sus navegadores, puedan leer que se trata de un titular.

Para terminar, hay que tener en cuenta la opción que tienen los usuarios de PC: dependiendo de la resolución de sus monitores pueden elegir la visualización de fuentes grandes o pequeñas.
        Las fuentes grandes (large fonts) logran compensar aquellos casos que, por el uso de una mayor resolución, se pierde legibilidad. Por ende, el tamaño de las fuentes, es absolutamente relativo y puede variar radicalmente de una PC a otra.
        En layouts "hard" duros, es importante verificar estas diferencias y el efecto que producen sobre nuestro diseño. El truco aquí radica en combinar elementos "duros" y "blandos" dentro de la página, utilizando los suaves para apaciguar el efecto de los anteriores.

       No tengan miedo de utilizar el espacio en forma creativa, ya que el mismo es particularmente elástico.

 
Joe Gillespsie

http://www.wpdfd.com/wpdtypo.htm

Typography

Carina C. Kornowski