Día 37: CSS Fonts

Día 37: CSS Fonts

La ruta del desarrollador web frontend autónomo🤹‍♂️


La selección de fuente es importante

Elegir la fuente correcta tiene un gran impacto en cómo los lectores experimentan un sitio web.

La fuente correcta puede crear una fuerte identidad para su marca.

Es importante usar una fuente que sea fácil de leer. La fuente agrega valor a su texto. También es importante elegir el color y el tamaño de texto correctos para la fuente.


Familia de fuentes genéricas

En CSS hay cinco familias de fuentes genéricas:

  1. Serif las fuentes tienen un pequeño trazo en los bordes de cada letra. Crean una sensación de formalidad y elegancia.

  2. Sans-serif las fuentes tienen líneas limpias (sin pequeños trazos adjuntos). Crean un aspecto moderno y minimalista.

  3. Monospace aquí todas las letras tienen el mismo ancho fijo. Crean un aspecto mecánico.

  4. Cursive las fuentes imitan la escritura humana.

  5. Fantasy las fuentes son fuentes decorativas/divertidas.

Todos los diferentes nombres de fuentes pertenecen a una de las familias de fuentes genéricas.


Diferencia de fuentes Serif y Sans-serif

Nota: En las pantallas de las computadoras, las fuentes sans-serif se consideran más fáciles de leer que las fuentes serif.


Algunos ejemplos


La propiedad font-family

En CSS, usamos la propiedad font-family para especificar la fuente de un texto.

Nota: Si el nombre de la fuente tiene más de una palabra, debe estar entre comillas, ejemplo: "Times New Roman".

Tip: La propiedad font-family debe contener varios nombres de fuente como un sistema "alternativo", para garantizar la máxima compatibilidad entre navegadores/sistemas operativos. Comience con la fuente que desee y termine con una familia genérica (para permitir que el navegador elija una fuente similar en la familia genérica, si no hay otras fuentes disponibles). Los nombres de las fuentes deben estar separados por comas.

Ejemplo:

Especifique algunas fuentes diferentes para tres párrafos:


Resumen

Elegir la fuente correcta es importante para la identidad de marca y la legibilidad del texto en un sitio web. CSS tiene cinco familias de fuentes genéricas, y la propiedad font-family se usa para especificar la fuente de un texto. Las fuentes sans-serif se consideran más fáciles de leer en las pantallas de las computadoras. Es importante incluir varias fuentes en la propiedad font-family para garantizar la máxima compatibilidad entre navegadores y sistemas operativos.


Traducido con 💚 desde W3Schools.com

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!