Mientras que las imágenes reciben gran parte del amor cuando se trata de sitios web, es la palabra escrita la que atrae a los motores de búsqueda y lleva adelante el contenido de la mayoría de los sitios. Como tal, el diseño tipográfico es una parte muy importante del diseño de sitios web. Con la importancia del texto de un sitio viene la necesidad de asegurar que se vea bien y que sea fácil de leer. Esto se hace con el estilo CSS (Cascading Style Sheets).

Siguiendo el moderno estándar de diseño web, cuando quieras dictar el aspecto del contenido de texto de un sitio web, lo harás usando CSS. Esto separa ese estilo CSS de la estructura HTML de una página. Por ejemplo, si desea establecer la fuente de una página en «Arial», puede hacerlo añadiendo la siguiente regla de estilo a su CSS (esto probablemente se haría en una hoja de estilo CSS externa que potencie los estilos para cada página del sitio web):

body {

<

 pre> font-family: Arial;

<

}

<

Esta fuente está definida para el «cuerpo», por lo que la cascada CSS aplicará el estilo a todos los demás elementos de la página. Esto se debe a que todos los demás elementos HTML son hijos del elemento «body», los estilos CSS, como la familia de fuentes o el color, pasarán en cascada del elemento padre al elemento hijo. Este será el caso a menos que se añada un estilo más específico para ciertos elementos. El único problema con este CSS es que sólo se especifica una única fuente. Si por alguna razón no se puede encontrar esa fuente, el navegador la sustituirá por otra en su lugar. Esto es malo porque no tienes control sobre la fuente que se usa; el navegador elegirá por ti, y puede que no te guste lo que decidió usar. Ahí es donde entra una pila de fuentes.

Una pila de fuentes es una lista de fuentes en la declaración de la familia de fuentes CSS. Las fuentes se enumeran en orden de preferencia que le gustaría que aparecieran en el sitio en caso de un problema, como por ejemplo, si la fuente no se está cargando. Una pila de fuentes permite al diseñador controlar el aspecto de las fuentes en la página web, incluso si el equipo no tiene la fuente inicial que usted solicitó.

¿Cómo se ve una pila de fuentes? Aquí hay un ejemplo:

body {

<

 pre> font-family: Georgia, "Times New Roman", serif;

.

}

<

Hay algunas cosas que se pueden notar aquí.

Primero, verá que hemos separado los diferentes nombres de fuentes con una coma entre cada una. Puede agregar tantas fuentes como desee, siempre y cuando estén separadas por una coma. El navegador intentará cargar la primera fuente especificada primero. Si esto falla, se ejecutará en la línea que prueba cada fuente hasta que encuentre una que pueda usar. En este ejemplo, estamos usando fuentes seguras para la web, y «Georgia» probablemente se encontrará en el ordenador de la persona que está visitando el sitio (el navegador busca en su ordenador las fuentes especificadas en la página, por lo que el sitio en realidad le está indicando al ordenador qué fuentes debe cargar desde su sistema). Si por alguna razón esa fuente no se encuentra, se moverá hacia abajo de la pila y probará la siguiente fuente especificada.

En términos de la siguiente fuente, observe cómo está escrita en la pila. El nombre de «Times New Roman» está entre comillas. Esto se debe a que el nombre de la fuente tiene varias palabras. Cualquier nombre de fuente con más de una palabra (Trebuchet MS, Courier New, etc.) debe tener el nombre entre comillas para que el navegador sepa que todas esas palabras son parte de un nombre de fuente.

Finalmente, terminamos la pila de fuentes con «serif», que es una clasificación genérica de fuentes. En el improbable caso de que ninguna de las fuentes que ha nombrado en su pila esté disponible, el navegador encontrará una fuente que al menos caiga en la clasificación correcta que usted ha elegido. Por ejemplo, si está usando fuentes sans-serif como Arial y Verdana, entonces terminar una pila de fuentes con la clasificación de «sans-serif» al menos mantendrá la fuente en esa familia general si hay un problema de carga. Es cierto que debería ser muy raro que un navegador no pueda encontrar ninguna de las fuentes listadas en la pila y tenga que usar en su lugar esta clasificación genérica, es una buena práctica incluirla de todos modos sólo para estar doblemente seguro.

Pila de fuentes y fuentes web

Muchos sitios web utilizan hoy en día fuentes web que se incluyen en el sitio junto con otros recursos (como las imágenes del sitio, el archivo Javascript, etc.) o están vinculados a una ubicación de fuentes externa como Google Fonts o Typekit. Aunque estas fuentes deberían cargarse ya que está enlazando a los archivos mismos, todavía quiere usar una pila de fuentes para asegurarse de que tiene algún control sobre cualquier problema que pueda surgir. Lo mismo ocurre con las fuentes «web safe» que deberían estar en el ordenador de alguien (tenga en cuenta que las fuentes que hemos usado como ejemplos en este, incluyendo Arial, Verdana, Georgia y Times New Roman, son todas fuentes web safe que deberían estar en el ordenador de una persona). Aunque la probabilidad de que falte una fuente es muy baja, especificar una pila de fuentes ayudará a blindar el diseño tipográfico de un sitio tanto como sea posible.

Original de Jennifer Krynin. Editado por Jeremy Girard.