El diseño tipográfico es una pieza de importancia crítica para el éxito del diseño de un sitio web. La creación de sitios con texto que es fácil de leer y que se ve muy bien son los objetivos de todo profesional del diseño web. Para lograrlo, deberá ser capaz de establecer las fuentes específicas que desea utilizar en sus páginas web. Para especificar el tipo de letra o la familia tipográfica en sus documentos Web, utilizará la propiedad font-family style en su CSS.

El estilo de familia de fuentes más sencillo que podría usar incluiría sólo una familia de fuentes:

p {font-family: Arial;}

Si aplicara este estilo a una página, todos los párrafos se mostrarían en la familia de fuentes «Arial». Esto es genial y como «Arial» es lo que se conoce como una «fuente segura para la web», lo que significa que la mayoría de los ordenadores (si no todos) la tendrían instalada, puedes estar tranquilo sabiendo que tu página se mostrará en la fuente deseada.

¿Qué sucede si la fuente que ha seleccionado no se encuentra? Por ejemplo, si no usas una «fuente segura para la web» en una página, ¿qué hace el agente de usuario si no tiene esa fuente? Hacen una sustitución.

Esto puede resultar en páginas muy divertidas. Una vez fui a una página donde mi ordenador lo mostraba completamente en «Wingdings» (un conjunto de iconos) porque mi ordenador no tenía la fuente que el desarrollador había especificado, y mi navegador hizo una elección muy pobre en cuanto a la fuente que usaría como reemplazo. La página era completamente ilegible para mí! Aquí es donde entra en juego una pila de fuentes.

Separar varias familias de fuentes con una coma en una pila de fuentes

Una «pila de fuentes» es una lista de fuentes que desea que su página utilice. Usted pondría sus opciones de fuentes en el orden de su preferencia y las separaría con una coma. Si el navegador no tiene la primera familia de fuentes en la lista, probará la segunda y luego la tercera y así sucesivamente hasta que encuentre una que tenga en el sistema.

font-familia: Pussycat, argelino, Broadway;

En el ejemplo anterior, el navegador buscará primero la fuente «Pussycat», luego «Algerian» y luego «Broadway» si no se encontró ninguna de las otras fuentes. Esto le da más posibilidades de que se utilice al menos una de las fuentes elegidas. No es perfecto, por lo que tenemos aún más que podemos añadir a nuestra pila de fuentes (¡sigue leyendo!).

Usar fuentes genéricas al final

Así que puede crear una pila de fuentes con una lista de fuentes y aún así no tener ninguna de las cuales el navegador pueda encontrar. Obviamente no quieres que tu página se muestre ilegible si el navegador hace una mala elección de sustitución. Afortunadamente, CSS también tiene una solución para esto: fuentes genéricas.

Siempre debe terminar su lista de fuentes (incluso si se trata de una lista de una familia o de las únicas fuentes seguras para la Web) con una fuente genérica. Hay cinco que puedes usar:

• cursiva
• fantasía
• monoespacio
• sans-serif
• serif

Los dos ejemplos anteriores pueden ser cambiados a:

font-familia: Arial, sans-serif;

font-family: Pussycat, argelino, Broadway, fantasía;

>

Algunos nombres de familias de fuentes son dos o más palabras

Si la familia tipográfica que desea utilizar es más de una palabra, debe rodearla con comillas dobles. Aunque algunos navegadores pueden leer familias de fuentes sin las comillas, puede haber problemas si el espacio en blanco se condensa o se ignora.

font-familia: «Times New Roman», serif;

En este ejemplo, puede ver que el nombre de la fuente «Times New Roman», que es multipalabra, está entre comillas. Esto le indica al navegador que las tres palabras son parte del nombre de la fuente, en lugar de tres fuentes diferentes, todas con nombres de una sola palabra.

Original de Jennifer Krynin. Editado el 12/2/16 por Jeremy Girard