El diseño tipográfico es una pieza de vital importancia para el diseño de un sitio web exitoso. Crear sitios con texto que sea fácil de leer y que se vea genial es el objetivo de todo profesional del diseño web. Para lograr esto, deberá poder configurar las fuentes específicas que desea utilizar en sus páginas web. Para especificar el tipo de letra o la familia de fuentes en sus documentos web, utilizará la propiedad de estilo de familia de fuentes en su CSS.
El estilo de familia de fuentes más sencillo que podría usar incluiría solo una familia de fuentes:
pag {
familia de fuentes: Arial;
}
Si aplicaste este estilo a una página, todos los párrafos se mostrarían en la familia de fuentes "Arial". Esto es genial y dado que "Arial" es lo que se conoce como una "fuente segura para la web", lo que significa que la mayoría (si no todos) las computadoras lo tendrían instalado, puede estar tranquilo sabiendo que su página se mostrará en el fuente.
Entonces, ¿qué sucede si no se puede encontrar la fuente que seleccionaste? Por ejemplo, si no utiliza 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 algunas páginas de aspecto divertido. Una vez fui a una página donde mi computadora lo mostraba completamente en "Wingdings" (un conjunto de íconos) porque mi computadora no tenía la fuente que el desarrollador había especificado, y mi navegador tomó una pésima elección en qué fuente usaría como fuente reemplazo. ¡La página era completamente ilegible para mí! Aquí es donde entra en juego una pila de fuentes.
Separe varias familias de fuentes con una coma en una pila de fuentes
Una "pila de fuentes" es una lista de fuentes que desea que utilice su página. Pondría sus opciones de fuente en orden de su preferencia y separaría cada una 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.
familia de fuentes: Pussycat, argelina, Broadway;
En el ejemplo anterior, el navegador buscará primero la fuente "Pussycat", luego "Algerian" y luego "Broadway" si no se encuentra 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 aún tenemos más que podemos agregar a nuestra pila de fuentes (¡sigue leyendo!).
Usar fuentes genéricas al final
Por lo tanto, puede crear una pila de fuentes con una lista de fuentes y aún no tener ninguna de las que el navegador pueda encontrar. No desea que su 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, y se llama fuentes genéricas.
Siempre debe finalizar su lista de fuentes (incluso si es una lista de una familia o solo fuentes compatibles con la Web) con una fuente genérica. Hay cinco que puede utilizar:
- Cursivo
- Fantasía
- Monoespacio
- Sans-serif
- Serif
Los dos ejemplos anteriores se pueden cambiar a:
familia de fuentes: Arial, sans-serif;
o.
familia de fuentes: Pussycat, argelina, Broadway, fantasía;
Algunos nombres de familias de fuentes son dos o más palabras
Si la familia de fuentes que desea utilizar tiene más de una palabra, debe rodearla con comillas dobles. Si bien algunos navegadores pueden leer familias de fuentes sin comillas, puede haber problemas si el espacio en blanco se condensa o se ignora.
familia de fuentes: "Times New Roman", serif;
En este ejemplo, puede ver que el nombre de la fuente "Times New Roman", que es de varias palabras, está entre comillas. Esto le dice al navegador que las tres palabras son parte de ese nombre de fuente, a diferencia de tres fuentes diferentes, todas con nombres de una sola palabra.