SummArg | Cursos y recursos para webmasters

24/12/2009

Fuentes seguras para tu website

A la hora de diseñar un sitio web, es imperativo tener en cuenta el tema de las fuentes y adaptarnos lo mejor posible a las fuentes seguras u optar por alguna tecnología que nos permita cargar la fuente que se nos venga en gana. Los navegantes no siempre tienen cargadas en sus PCs todas las fuentes que nosotros utilizamos, lo que significa que se pueden perder gran parte del encanto de un diseño si no consideramos este punto.

Para ello existen fuentes que se consideran seguras,lo que significa que están instaladas en la enorme mayoría de las computadoras. Afortunadamente la propiedad font-family soporta que le indiquemos varias fuentes, de modo que si el navegador encuentra la primer fuente, pasará a buscar la segunda, o en su defecto la tercera, etc. Cuando usamos font-family, siempre se termina indicando el nombre genérico de las fuentes.

Los nombres genéricos pueden ser Serif (Times New Roman, Georgia, todas las que tienen lineas decorativas al final del trazo), Sans Serif (Sans en francés significa “sin”, o sea fuentes sin las líneas decorativas), cursive (cursiva, itálica), fantasy (Impact, Papyrus, Copperplate, etc. ver listado de fuentes fantasy más comunes), monospace (familia de letras con ancho fijo, como las letras de una máquina de escribir, ver listado de fuentes monospace más comunes).

Juntando el nombre de la familia de la tipografía, y el nombre genérico, podemos pedir al navegador que primero cargue una fuente, si no la encuentra que utilice la segunda, si tampoco la encuentra que cargue cualquiera que corresponda al nombre genérico. Cada valor se separa con una coma y nos deja una sentencia como la siguiente:

p
{
font-family:"Times New Roman",Georgia,Serif;
}

En Dustinbrewer.com nos dejan un listado muy simple de entender con las fuentes más comunes (o sea las que se suelen instalar por defecto) en máquinas con diferentes sistemas operativos. Las marcas en amarillo indican que dicha fuente se encuentra con un poco menos de frecuencia.

En CodeStyle.org podemos obtener información sobre gran cantidad de fuentes que no aparecen en la gráfica de Dustin Brewer por ser menos frecuentes, pero veremos en detalle la presencia de fuentes menos comunes por sistema operativo y también tendremos más documentación sobre el uso de las fuentes en nuestras plantillas de estilo. Si recién empiezan con maquetación web, les va a resultar productivo ingresar a ver el listado de documentos relacionados al tema.

En Font Tester tienen otro listado de fuentes recomendadas.

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;

Espero que estos datos los ayuden a una mejor selección de las fuentes a la hora de diseñar un website.

Dejar un comentario