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 un sitio a tener más éxito al crear una experiencia de lectura agradable y fácil de consumir. Parte de sus esfuerzos al trabajar con la tipografía será elegir las fuentes adecuadas para su diseño y luego usar CSS para agregar esas fuentes y estilos de fuente a la visualización de la página. Esto se hace usando lo que se llama un pila de fuentes.
Pilas de fuentes
Cuando usted especificar 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 se pueda encontrar su elección de fuente. Estas opciones de reserva se presentan en la pila de fuentes. Si el navegador no puede encontrar la primera fuente listada en la pila, pasa 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 desee). Aquí hay un ejemplo de cómo se vería una pila de fuentes en CSS cuando se aplica al elemento "cuerpo":
cuerpo {
familia de fuentes: Georgia, "Times New Roman", serif;
}
La fuente Georgia aparece primero, por lo que, 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 vuelve a Times New Roman.
Encerrar Times New Roman 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 con espacios incrustados las necesita para que el navegador sepa que todas esas palabras comprenden el nombre de la fuente.
La pila de fuentes termina con la palabra serif. Ese es un nombre de familia de fuentes genérico. En el improbable caso de que una persona no tenga Georgia o Times New Roman en su computadora, el sitio usaría cualquier fuente serif que pudiera encontrar. El navegador elegirá una fuente por ti, pero al menos tú ofreces orientación para que sepa qué tipo de fuente funcionaría mejor dentro del diseño.
Familias de fuentes genéricas
El nombre de fuente genérico disponible en CSS es:
- cursivo
- fantasía
- monoespacio
- serif
- sans-serif
Si bien hay muchas otras clasificaciones de fuentes disponibles en diseño web y tipografía, incluidas slab-serif, blackletter, display, grunge y más, estos cinco nombres de fuentes genéricos son los que usaría en una pila de fuentes en CSS.
- Fuentes cursivas - a menudo presentan formas de letras delgadas y ornamentadas que están destinadas a reproducir un texto elegante escrito a mano. Estas fuentes, debido a sus letras delgadas y floridas, no son apropiadas para un gran bloque de contenido como el cuerpo del texto. Las fuentes cursivas se utilizan generalmente para encabezados y necesidades de texto más corto que se pueden mostrar en tamaños de fuente más grandes.
- Fuentes de fantasía - son las fuentes un tanto locas que realmente no entran en ninguna otra categoría. Fuentes que reproducen logotipos conocidos, como las formas de las letras del Harry Potter o Regreso al futuro películas, entran en esta categoría. Estas fuentes no son apropiadas para el contenido del cuerpo, ya que a menudo están tan estilizadas que leer pasajes más largos de texto escritos con estas fuentes es demasiado difícil de hacer.
- Fuentes monoespaciadas - presenta formas de letras del mismo tamaño y espaciadas como las que hubiera encontrado en una vieja máquina de escribir. A diferencia de otras fuentes que tienen anchos variables para las letras según su tamaño (por ejemplo, una mayúscula W ocupa mucho más espacio que una minúscula I), las fuentes monoespaciadas utilizan un ancho fijo para todos los caracteres. Estas fuentes se utilizan a menudo para lecturas de código porque se ven claramente diferentes de otros textos en esa página.
- Fuentes serif - Emplee pequeñas ligaduras adicionales en las formas de las letras. Esas piezas extra se llaman serifas. Las fuentes serif comunes son Georgia y Times New Roman. Las fuentes serif funcionan muy bien para textos grandes como encabezados, así como para pasajes largos de texto y cuerpo.
- Sans-seriffuentes - no tienen ligaduras. El nombre significa sin serifas. Las fuentes populares en esta categoría incluyen Arial o Helvetica. Al igual que las serifas, las fuentes sans-serif funcionan igualmente bien en los encabezados y en el contenido del cuerpo, aunque algunas Los expertos prefieren que los grandes bloques de texto eviten las fuentes sans-serif porque son más difíciles de leer en un punto pequeño. Tamaños.