Fuentes en CSS

En CSS, la propiedad font-family te permite definir las fuentes que se utilizarán para mostrar el texto en una página web. La tipografía adecuada no solo mejora la estética del diseño, sino que también puede influir en la legibilidad y accesibilidad del contenido.

Propiedad `font-family`

La propiedad font-family es utilizada para especificar la fuente que se va a utilizar en el texto de un elemento. Puedes definir una lista de fuentes en orden de preferencia, y si la primera no está disponible, se utilizará la siguiente.

Ejemplo Básico:


h1 {
    font-family: "Arial", sans-serif;
}

En este ejemplo, el título <h1> se mostrará con la fuente Arial, y si no está disponible, se usará cualquier fuente sans-serif disponible en el sistema.

Tipos de Fuentes

Existen tres tipos principales de fuentes:

Fuentes Serif: Fuentes que tienen pequeños adornos en las letras, como Times New Roman o Georgia.
Fuentes Sans-serif: Fuentes sin adornos, como Arial o Helvetica.
Fuentes Monospace: Fuentes donde cada letra ocupa el mismo espacio, como Courier New o Monaco.

Ejemplo con Diferentes Tipos de Fuentes:


p.serif {
    font-family: "Times New Roman", serif;
}
                
p.sans-serif {
    font-family: "Arial", sans-serif;
}
                
p.monospace {
    font-family: "Courier New", monospace;
}

En este ejemplo, tenemos tres párrafos con diferentes tipos de fuentes: una fuente serif, una sans-serif y una monospace.

Usando Fuentes Web

Además de las fuentes disponibles de manera local en los dispositivos de los usuarios, puedes usar fuentes de la web. Una de las formas más populares de hacerlo es mediante Google Fonts, que ofrece una gran variedad de fuentes que se pueden cargar en tu página web.

Ejemplo con Google Fonts:

Para usar una fuente de Google Fonts, primero debes incluir el enlace a la fuente en la etiqueta <head> de tu documento HTML.


< head>
    < link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700"
    rel="stylesheet">
</head>

Luego, puedes aplicar la fuente en tu CSS:


body {
    font-family: "Roboto", sans-serif;
}

En este ejemplo, se está utilizando la fuente Roboto de Google Fonts para todo el contenido de la página.

Otras Propiedades Relacionadas con las Fuentes

Existen otras propiedades CSS que puedes usar para controlar la apariencia de las fuentes:

font-size: Define el tamaño de la fuente.
font-weight: Define el grosor de la fuente (normal, bold, o valores numéricos).
font-style: Define si la fuente es normal, cursiva o itálica.
line-height: Define la altura de la línea entre el texto.
letter-spacing: Controla el espaciado entre las letras.

Ejemplo de Uso Combinado:


h2 {
    font-family: "Georgia", serif;
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
    line-height: 1.5;
}

En este ejemplo, el título <h2> tiene la fuente Georgia, un tamaño de 24 píxeles, un peso de fuente bold, un estilo italic y una altura de línea de 1.5.

Conclusión

El uso adecuado de fuentes en CSS es esencial para garantizar la legibilidad y la estética de tu página web. Desde la selección de tipos de fuentes hasta el ajuste de propiedades como el tamaño, el peso y el espaciado, las fuentes juegan un papel crucial en la presentación del contenido. También, al usar fuentes web, puedes acceder a una amplia gama de tipografías que pueden mejorar aún más la experiencia del usuario en tu sitio web.

Recuerda siempre seleccionar fuentes que sean legibles y apropiadas para el tono de tu página web. Utiliza fuentes web cuando sea necesario para garantizar que los usuarios vean el diseño de la manera que lo has imaginado.

Anterior Siguiente