¿Por qué no se puede usar cualquier tipo de letra en diseño web?

Los navegadores (programas como Internet Explorer, Opera, Safari, Firefox, Google Chrome, etc) son los programas encargados de interpretar cada diseño web, para esto, utilizan las tipografìas instaladas en el Sistema Operativo (Windows, Linux, MacOS, etc) donde se esten ejecutando. Dado que no todos los sistemas operativos tienen las mismas tipografías instaladas, es recomendable utilizar aquellos fonts que estén instalados en todos los sistemas operativos más populares.

¿Cuáles son las tipografías instaladas por defecto en los S.O. más populares?

El sitio FontTester.com se ha dado la tarea de presentar el listado de fuentes seguras para web, el cual presentamos a continuación en el formato típico en el que se utiliza en archivos CSS:

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

¿Cómo puedo saber cuáles fonts están instaladas en cada sistema operativo?

Tipografías instaladas en diferentes sistemas operativos

La presente imagen se tomó de “Browser News” el 27 de octubre de 2008, esperamos que sea una referencia suficientemente clara sobre las fuentes más comunes en cada sistema operativo.

¿Qué alternativa se tiene para utilizar una tipografìa que no es web-safe?

Para este tema, le recomendamos leer nuestro artículo sobre sIFR, una técnica que combina JavaScript y Flash para lograr este objetivo sin tener que exportar como imagen un segmento de texto.

Breve reseña histórica de las tipografías más utilizadas

A continuación se presenta una breve reseña histórica sobre las tipografías más utilizadas para diseño web, los créditos del artículo original le corresponden al sitio “InspirationBit.com”, de donde estamos traduciendo un segmento relacionado con las tipografías más conocidas:

Helvetica, Helvetica Neue, Arial:

Helvetica fue creada por diseñadores suizos hace 50 años y es una de las fuentes sans-serif más ampliamente conocidas. Muchas compañías populares como American Airlines, Lufthansa y Toyoya escogieron esta tipografía como parte de su mercadeo e identidad gráfica. Hay muchas variaciones de Helvetica, en 1983 Linotype lanzó Helvetica Neue redibujando toda la familia Helvetica. Muchos consideran que Arial, diseñada 30 años después que Helvetica fue la imitación barata de esta, sin embargo, tiene más similitudes con Univers que con Helvetica

Verdana

Verdana fue diseñada específicamente por Microsoft en 1996 con el propósito de crear una tipografía que fuera fácil de leer en un tamaño muy pequeño de una pantalla. El no tener serifs, su proporción ancha y la pérdida de espacio entre letras hacen que sea una fuente extremadamente legible para sitios web.

Georgia

Georgia es otra fuente ordenada por Microsoft en 1993 que tiene bastantes similitudes con Times New Roman, pero es sustancialmente más larga. Funciona realmente bien tanto en tamaños grandes como en tamaños pequeños, y es usualmente seleccionada por los diseñadores web como una sustituta de la ya muy utilizada Times New Roman.

Trebuchet

Una vez más, Microsfot solicitó el diseño de otra muy buena fuente para web también en 1996. Funciona especialmente bien para títulos grandes y es ahí donde se utiliza más popularmente.

Fuentes:

Browser News
InspirationBit.com
FontTester.com