Artículo original escrito por Dionysia Lemonaki
Artículo original HTML Font – CSS Font Family Example (Serif and Sans Serif Characters)
Traducido y adaptado por Josué
Elegir el tipo de letra adecuado es un primer paso importante para que su sitio web sea utilizable y accesible.
El formato del texto afecta a la legibilidad de los diseños y las páginas web.
Puedes modificar la apariencia de tu texto HTML de muchas maneras utilizando CSS. Puedes seleccionar el tipo de fuente que quieres usar, si está en negrita o no, qué tamaño tiene, e incluso puedes cambiar el color y añadirle diferentes espaciados o decoraciones.
En este artículo, repasaremos las diferencias entre los dos tipos de letra más populares, Serif y Sans Serif.
Además, cubriremos la sintaxis y cómo utilizar la propiedad font-family para que, con la ayuda de CSS, puedas elegir y luego utilizar diferentes fuentes en tus proyectos de diseño web.
¡Empecemos!
Terminología tipográfica
En primer lugar, hablemos de algunos de los tipos de letra más comunes y frecuentes que admiten los navegadores modernos.
El tipo de letra Serif
Las fuentes Serif se caracterizan por los pequeños detalles extrafinos en los extremos de las letras.
Al final de los trazos principales de los caracteres, hay pequeños trazos de floritura llamados serifas (del francés serif).
Los tipos de letra Serif se utilizan tradicionalmente en la impresión, ya que se consideran legibles para pasajes largos de texto. Pero no siempre se muestran bien en las pantallas.
Las fuentes Serif están consideradas como las más clásicas, elegantes y tradicionales que se pueden utilizar.
El tipo de letra Sans-Serif
Este tipo de fuente crea un aspecto de diseño limpio, a la vez que es muy legible y claro.
Este tipo de letra tiene extremos rectos en cada letra y no hay trazos en los bordes, lo que hace que los caracteres parezcan nítidos y planos y con líneas limpias.
Las fuentes Sans-serif se consideran modernas, minimalistas, contemporáneas y una opción más legible para las pantallas de ordenador de alta resolución.
El tipo de letra Monospace
Con este tipo de letra, cada letra tiene la misma anchura fija y las letras están igualmente espaciadas.
Con los tipos de letra anteriores que hemos analizado hasta ahora, cada letra tiene una anchura diferente.
En cambio, con el tipo de letra monospace, todas las letras tienen la misma anchura. Esto hace que el texto se alinee bien y sea fácil de seguir, dando a los diseños un aspecto limpio y una sensación mecánica.
Hay otros dos tipos de fuentes genéricas disponibles, fantasy y cursive, pero los tipos de letra más utilizados son los mencionados anteriormente.
Como elegir un tipo de letra para su sitio web - nombres de fuentes
Ahora que hemos cubierto los términos básicos de las fuentes y sus descripciones, es el momento de ver los diferentes estilos de fuentes dentro de cada familia.
A continuación se enumeran algunos estilos comunes dentro de cada familia de fuentes:
Fuentes Serif
- Georgia
- Times
- Times New Roman
- Bodoni
- Garamond
- Palatino
- ITC Clearface
- Plantin
- Freight Text
- Didot
- American Typewriter
Fuentes Sans-Serif
- Arial
- Verdana
- Helvetica
- Geneva
- Tahoma
- Trebuchet MS
- Open Sans
- Liberation Sans
- Impact
Fuentes Monospace
- Courier
- MS Courier New
- Monaco
- Lucinda Console
- Andalé Mono
- Menlo
- Consolas
Como usar la propiedad font-family
En CSS, la propiedad font-family define un tipo de letra específico para un elemento y el aspecto que tendrá su contenido de texto.
La sintaxis de la propiedad font-family es:
element {
font-family: value;
}
Escribimos la propiedad font-family seguida de dos puntos :, un espacio, un value, y finalmente terminamos la especificación con un punto y coma ;.
Tenemos que establecer la propiedad a la que queremos apuntar y asignar el valor que queremos.
Como establecer una fuente CSS
Digamos que tenemos el HTML de abajo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS Fonts</title>
</head>
<body>
<h1>HTML Font – CSS Font Family </h1>
<p>I am a paragraph</p>
</body>
</html>
Sin aplicar ningún estilo y sin establecer explícitamente un valor a la propiedad font-family, los navegadores muestran los encabezados y los párrafos con el tipo de letra de su elección.
El tipo de letra estándar y por defecto de Google Chrome es Times New Roman, una fuente serif.
El resultado tiene este aspecto:
Hay varias maneras de establecer un tipo de letra diferente y especificar la fuente que queremos.
A la hora de elegir un tipo de letra, que es la parte más valiosa, hay que mencionar que los sitios utilizan un conjunto limitado de tipos de letra. Tomarán las fuentes que ya están instaladas en el ordenador del usuario.
Un navegador solo mostrará un tipo de letra si ya está instalado en el ordenador del usuario.
Así que veamos las formas en que se puede establecer un tipo de letra en CSS.
Cómo utilizar un nombre genérico de familia de fuentes
En este caso, los nombres son palabras clave e incluyen una de las categorías de fuentes mencionadas anteriormente (serif, sans-serif, monospace).
Sería algo así:
p {
font-family: serif;
}
Esto establece la fuente a una fuente serif genérica.
Como utilizar un nombre de familia de fuentes específico
p {
font-family: Times,serif;
}
Esta regla establece Times como la fuente deseada y luego Serif como la opción genérica de reserva, en caso de que la primera opción no esté instalada en el ordenador del usuario.
Si el nombre contiene algún espacio en blanco, es necesario encerrarlo entre comillas.
p {
font-family: "Courier New",monospace;
}
Esto establece la fuente a Courier New y añade monospace como respaldo.
Si especificamos un tipo de letra que no sea uno de los nombres genéricos (como serif, sans-serif) tenemos que dar al navegador una alternativa.
Como utilizar una pila de fuentes
En este caso, la propiedad font-family tiene múltiples valores.
Es una lista priorizada, separada por comas, de nombres de familias de fuentes que puede aplicar al texto, indicando que todas las fuentes son alternativas. Esto permite la máxima compatibilidad con los navegadores y sistemas operativos.
La lista se prioriza de izquierda a derecha, de mayor a menor prioridad.
p {
font-family: "Lucida Console", Courier, monospace;
}
Al aplicar más de un nombre de familia de fuentes, se crea un orden de preferencia. Empezamos con la fuente que queremos primero.
Si un usuario no tiene la primera opción instalada en su ordenador o si no es compatible con el navegador, este pasa a la segunda fuente y la utiliza. Si esa fuente tampoco está disponible, pasa a la tercera, y así sucesivamente.
Podemos listar tantas fuentes como queramos, pero la mejor práctica es listar de tres a cuatro.
Si todo lo demás falla, siempre habrá una fuente genérica listada al final como última opción-mecanismo de devolución.
Del grupo listado, el navegador tiene que soportar al menos una opción y el nombre genérico garantiza que algo en la familia de fuentes deseada será renderizado.
p {
font-family: Georgia, "Times New Roman", Times, serif;
Los tipos de letra que se enumeran se conocen como una pila de fuentes.
El navegador buscará primero Georgia. Si está instalada, el navegador mostrará esa fuente. A continuación, buscará Times New Roman. Si tampoco está disponible, recurrirá a mostrar la fuente genérica por defecto de la familia serif.
Conclusión
En este artículo, hemos repasado las diferentes familias de fuentes y hemos dado algunos ejemplos de los diferentes estilos dentro de cada familia.
También repasamos la propiedad font-family y las tres formas diferentes de establecer una fuente en CSS.
Si quieres aprender más sobre HTML y CSS y las diferentes técnicas modernas que se utilizan, freeCodeCamp tiene una certificación gratuita sobre Diseño Web Responsivo.
Empezarás desde lo más básico hasta llegar a Flexbox, CSS Grid, y cómo hacer sitios web responsivos. Estas son habilidades esenciales para el diseño digital y el desarrollo web front-end.
Al final, construirás 5 proyectos, incluyendo un sitio de portafolio donde puedes mostrar los otros proyectos que has construido si lo deseas.
Gracias por leer y feliz aprendizaje.