La selección de la 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 tu marca. Es importante usar una fuente que sea fácil de leer. La fuente agrega valor a tu texto. También es importante elegir el color y el tamaño de texto correctos para la fuente.

Familias de fuentes genéricas

En CSS hay cinco familias de fuentes genéricas:

  • Las fuentes Serif tienen un pequeño trazo en los bordes de cada letra. Crean una sensación de formalidad y elegancia.
  • Las fuentes sans-serif tienen líneas limpias (sin pequeños trazos adjuntos). Crean un aspecto moderno y minimalista.
  • Fuentes monospace: aquí todas las letras tienen el mismo ancho fijo. Crean un aspecto mecánico.
  • Las fuentes cursive imitan la escritura humana.
  • Las fuentes fantasy son fuentes decorativas/divertidas.

La propiedad CSS font-family

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

Nota: si el nombre de la fuente es más de una palabra, debe estar entre comillas, como: "Times New Roman".

Sugerencia: la propiedad font-family debe contener varios nombres de fuente como un sistema de "alternativa", para garantizar la máxima compatibilidad entre navegadores/sistemas operativos. Comienza con la fuente que desees y termina 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.

Ejm

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Fuentes web seguras CSS

Las fuentes web seguras son fuentes que se instalan universalmente en todos los navegadores y dispositivos.

Fuentes alternativas

Sin embargo, no hay fuentes 100% completamente seguras para la web. Siempre existe la posibilidad de que no se encuentre una fuente o no se instale correctamente. Por lo tanto, es muy importante utilizar siempre fuentes alternativas.

Esto significa que debes agregar una lista de "fuentes de respaldo" similares en la propiedad font-family. Si la primera fuente no funciona, el navegador probará con la siguiente, y con la siguiente, y así sucesivamente. Siempre finaliza la lista con un nombre de familia de fuente genérico.

Ejm

{
font-family: Tahoma, Verdana, sans-serif;
}

Las mejores fuentes web seguras para HTML y CSS

La siguiente lista son las mejores fuentes web seguras para HTML y CSS:

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

Nota: antes de publicar tu sitio web, siempre verifica cómo aparecen tus fuentes en diferentes navegadores y dispositivos, ¡y siempre usa fuentes alternativas!