Universal AJAX Live Search

La seguridad es primero! : Web Safe Fonts

Una de las situaciones a las que se enfrenta todo diseñador de páginas web cuando está comenzando a desarrollarse en el área, es el uso de las tipografías, ya que, en la fase de diseño muchas veces utilizamos fuentes de forma muy creativa, pero al momento de ver nuestra creación en internet: Problema!, la fuente no es precisamente la que utilizaste en tu diseño y el estilo se ha alterado :( Antes de caer en pánico, expliquemos a que se debe esto y por supuesto, como solucionarlo.

Esto es así porque en los documentos HTML la información de la tipografía no se incrusta en el propio documento, como sucede en los documentos de Word, por ejemplo, sino que simplemente se le  indica la fuente con la que debe mostrarse el contenido, y el navegador va a buscarla al repositorio local de fuentes  del equipo (en C:/Windows/fonts, por ejemplo). Si la que se le ha indicado no está, utiliza la tipografía por defecto del sistema. 

Para evitar este problema, y poder escoger una tipografía para un título o un encabezado, se acostumbraba usar trucos como escribir el texto en Photoshop, y exportar una imagen que sería colocada en la página web. El inconveniente de esto, es que cualquier cosa que no fuera texto real, no era útil para efectos de SEO, ya que el buscador no es capaz de leer ese texto para comprobar la relevancia de las palabras clave de un sitio.

 

El concepto de Web Safe Fonts es sencillo, existen varios tipos de fuentes que existen virtualmente en todas las computadoras y dispositivos, ya que vienen precargados en sus sistema, asi que si un contenido web utiliza cualquiera de estos estilos, va a verse exactamente igual en cualquier equipo, a estos nos referimos cuando hablamos de asegurarnos de usar una Web Safe Font en en proyecto para que no se altere el diseño de nuestro contenido y aunque muchos podrán considerar anticuado o escaso de creatividad el uso de una fuente precargada, esto es más una medida de seguridad y vale la pena saber su utilidad.

La propiedad font-family y el concepto de font stacks

Cuando determinamos la fuente tipográfica a utilizar en nuestro diseño web, hacemos uso de la propiedad font-family, que no es otra cosa mas que el nombre de la fuente que queremos  usar en un párrafo, en los encabezados, etc. Pero esta regla no solo se compone del nobre de la fuente , sino que además lleva algunas palabras adicionales conocidas como Font - stack,  algo asi como un respaldo en caso de que la primera fuente nombrada no se encuentre en el sistema, de este modo, como podemos ver en el ejemplo, si el sistema no encuentra la fuente Times New Roman, debe reemplazar por alguna cuyo nombre es Times y si tampoco está, con cualquiera del tipo "serif":

p {
    font-family: "Times New Roman", Times, serif
}

 

En los font-stacks cada palabra se separa con una coma, y se ordena según la familia (serif, sans-serif, monospace) poniendo primero la fuente deseada y enseguida las que se parezcan más asegurando que son Web Safe Fonts.

Esta es una medida de seguridad importante ya que si sólo dejaramos el nombre de la primera fuente, y no se encuenra en el sistema de quien ve nuestra página, será reemplaada literalmente cualquier fuente (se le parezca o no) sin que tengamos siquiera un poco de control sobre ello.

Aqui algunos ejemplos de font-stacks usando Web Safe fonts que podrán darte una idea de combinaciones para su uso:

Sans-Serif o fuentes sin remates en sus extremos, también llamadas de "palo seco" 

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;

 

Serif o fuentes con remates o pequeños adornos en sus extremos

font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, serif;
font-family: Bookman, serif;
font-family: Georgia, serif;
font-family: 'MS Serif', 'New York', serif;
font-family: 'Times New Roman', Times, serif;

 

Monospace o fuentes utilizadas para mostrar código

font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: 'Lucida Console', Monaco, monospace;

 

También puedes visitar CSS font stacks.

Hablemos de opciones

Ahora, ya que estamos en contexto, hablemos de las alternativas para poder utilizar algunas fuentes personalizadas que no sean precisamente Times New Roman o Arial sin correr un riesgo demasiado grande para nuestro diseño.

En Google Fonts  es muy sencillo elegir una fuente mas acorde a nuestros Diseños web, aquí una pequeña muestra, de cómo se hace este proceso:

En el sitio web de Google fonts, localizamos la fuente que queremos usar y hacemos click en el icono de “Quick Use”

Se pueden elegir uno o más estilos de la fuente, teniendo en cuenta que cada uno que se añada hará más pesada la carga de la misma por parte del usuario

Enseguida obtenemos el enlace que deberá ser agregado en la sección <header> de nuestro archivo de tipo html

y también la regla que nos servirá para cada elemento dentro de nuestro archivo de estilos CSS para que aplique ese estilo.

 

Además de Google fonts hay otros sitios dónde se pueden encontrar fuentes y su proceso de uso es prácticamente el mismo, como por ejemplo  Font Squirrel, Font Spring, Font Deck, entre otros.

 

Otra alternativa es el uso de la regla @font-face, nos permite utilizar prácticamente cualquier fuente tipográfica que pueda ser instalada en un equipo, subiendo el archivo instalable de la fuente a nuestro servidor y haciendo el llamado desde nuestra hoja de estilos con la siguiente sintaxis:

/*Este es el método con más soporte para diferentes navegadores que puedo recomendarles hasta el momento hasta el momento*/
@font-face {
  font-family: 'MiFuente';
  src: url('mifuente.eot'); /* IE9 Modo de Compatibilidad */
  src: url('mifuente.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('mifuente.woff') format('woff'), /* Navegadores modernos */
       url('mifuente.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/*Posteriormente utilizamos nuestra fuente de esta manera:*/
body {
  font-family: 'MiFuente', Respaldo, sans-serif;
}

 

Nótese que para maximizar la compatibilidad y éxito de este método en nuestro proyecto, lo ideal escontar con esa fuente disponible en diferentes formatos. En teoría, uso de @font-face pondría fin a la limitación de no poder usar fuentes fuera de lo común en proyectos web, pero si vas a utilizar este método es importante que consideres que dado que incrementa el número de solicitudes que se hacen al servidor para cargar una página, la carga puede considerablemente más lenta y que aún siguiendo todas las precauciones, curiosamente @font-face es uno de esos recursos que constantemente presentarn 'bugs' o errores inesperados durante su ejecución.

Espero este artículo haya sido de tu agrado y sobre todo que te ayude a planificar el uso de las fuentes tipográficas en tus proyectos para tener la seguridad de que todo se verá como debe ser!

 

Zae Vega. Diseñadora Web, Amante del Café, la Usabilidad y Front-End.

Dudas o comentario? Encuéntrame en twitter como @ZaeVega