Al diseñar un sitio web, uno de los elementos clave de una página con la que trabajará es el contenido de texto. Como tal, cuando usted construye una página web y la diseña con CSS, una gran parte de ese esfuerzo se centrará en la tipografía del sitio.
El diseño tipográfico juega un papel importante en el diseño de sitios web. El contenido de texto bien distribuido y formateado ayuda a que un sitio sea más exitoso al crear una experiencia de lectura agradable y fácil de consumir. Parte de sus esfuerzos para trabajar con el tipo será elegir las fuentes correctas para su diseño y luego usar CSS para agregar esas fuentes y estilos de fuente a la pantalla de la página. Esto se hace usando lo que se llama "pila de fuentes"
Fuente-pilas
Cuando especifique una fuente para usar en una página web, es una buena práctica incluir también opciones de respaldo en caso de que no pueda encontrar su fuente. Estas opciones de respaldo se presentan en la "pila de fuentes". Si el navegador no puede encontrar la primera fuente que figura en la pila, se mueve a la siguiente. Continúa este proceso hasta que encuentra una fuente que puede usar, o se queda sin opciones (en cuyo caso simplemente elige cualquier fuente del sistema que quiera). Este es un ejemplo de cómo se vería una pila de fuentes en CSS cuando se aplica al elemento "cuerpo":
cuerpo { Familia tipográfica: Georgia, "Times New Roman", serif;}
Observe que especificamos la fuente Georgia primero. De forma predeterminada, esto es lo que usará la página, pero si esa fuente no está disponible por algún motivo, la página retrocederá a Times New Roman. Incluimos el nombre de la fuente entre comillas dobles porque es un nombre de varias palabras. Los nombres de fuente de una sola palabra, como Georgia o Arial, no requieren las comillas, pero el nombre de fuente de varias palabras los necesita para que el navegador sepa que todas esas palabras forman el nombre de la fuente. Si observa el final de la pila de fuentes, debe notar que terminamos con la palabra "serif". Ese es un nombre genérico de la familia de fuentes. En el improbable caso de que una persona no tenga Georgia o Times New Roman en su computadora, el sitio usará la fuente serif que encuentre. Esto es preferible a permitir que el sitio se adapte a las fuentes que desee, ya que al menos puede saber qué tipo de fuente debe usar para que la apariencia y el tono general del diseño de un sitio estén lo más intactos posible. Sí, el navegador elegirá una fuente para usted, pero al menos está proporcionando orientación para que sepa qué tipo de fuente funcionaría mejor dentro del diseño. El nombre de la fuente genérica disponible en CSS son: Si bien hay muchas otras clasificaciones de fuentes disponibles en diseño web y tipografía, incluyendo slab-serif, blackletter, display, grunge, y más, estos 5 nombres de fuentes genéricos listados arriba son los que usaría en una pila de fuentes en CSS. ¿Cuáles son las diferencias en estas clasificaciones de fuentes? ¡Vamos a ver! Cursivo las fuentes a menudo presentan formas de letras finas y adornadas que están destinadas a replicar texto elegante a mano. Estas fuentes, debido a sus letras delgadas y floridas, no son adecuadas para un gran bloque de contenido como, por ejemplo, la copia del cuerpo. Las fuentes cursivas se utilizan generalmente para encabezados y necesidades de texto más cortas que se pueden mostrar en tamaños de fuente más grandes. Fantasía Las fuentes son las fuentes un tanto locas que realmente no entran en ninguna otra categoría. Las fuentes que reproducen logotipos conocidos, como las formas de las letras de las películas de Harry Potter o Regreso al futuro, caerían en esta categoría. Una vez más, estas fuentes no son adecuadas para el contenido del cuerpo, ya que a menudo están tan estilizadas que leer pasajes más largos de texto escritos en estas fuentes es demasiado difícil de hacer. Monoespacio las fuentes son aquellas en las que todas las formas de letras tienen el mismo tamaño y están espaciadas, como las que habrías encontrado en una máquina de escribir antigua. A diferencia de otras fuentes que tienen anchos variables para las letras según su tamaño (por ejemplo, una "W" mayúscula ocuparía mucho más espacio que una "i" minúscula), las fuentes monoespaciadas tienen una anchura fija para todos los caracteres. Estas fuentes a menudo se usan cuando el código se muestra en una página porque se ven claramente diferentes a otros textos en esa página. Serif Las fuentes son una de las clasificaciones más populares. Estas son fuentes que tienen pequeñas ligaduras adicionales en las formas de las letras. Esas piezas extra se llaman "serifs". Las fuentes serif comunes son Georgia y Times New Roman. Las fuentes Serif se pueden usar para texto grande como encabezado, así como largos pasajes de texto y copia del cuerpo. Sans-serif Es la clasificación final que veremos. Estas son fuentes que no tienen las ligaduras mencionadas anteriormente. El nombre significa "sin serifas". Las fuentes populares en esta categoría serían Arial o Helvetica. Al igual que en serifs, las fuentes sans-serif se pueden usar igualmente en los encabezados y en el contenido del cuerpo. Familias de fuentes genéricas
