Curso de HTML5 y CSS3: Fuentes

Tipos de fuentes en CSS3

Las fuentes se dividen en diversas categorías, cuya selección puede afectar el diseño general de una página web. Las tres categorías principales son:

• Fuentes serif: Tienen pequeños adornos al final de los trazos. Ejemplo: Times New Roman.
• Fuentes sans-serif: Son más limpias y modernas, sin adornos. Ejemplo: Arial.
• Fuentes de script: Imitan la escritura a mano, ideales para encabezados. Ejemplo: Brush Script.

Tamaños de fuentes

El tamaño de una fuente puede establecerse de varias maneras en CSS:

• en píxeles (px)
• en puntos (pt)
• en porcentajes (%)
• en unidades de longitud relativa, como em o rem

Veamos un ejemplo práctico de cómo definir estos tamaños:

h1 {
    font-size: 32px;  /* Tamaño en píxeles */
}

p {
    font-size: 1.5em; /* Tamaño relativo */
}
        

Tipografías personalizadas

Para utilizar tipografías personalizadas, el uso de Google Fonts es ampliamente recomendado. A continuación, se detalla cómo integrar una fuente de Google Fonts en tu proyecto:

1. Visitar Google Fonts.
2. Elegir la fuente deseada y hacer clic en «Seleccionar esta fuente».
3. Copiar el enlace proporcionado en la parte superior, que puede verse así:

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

A continuación, puedes aplicarla en tu CSS de la siguiente manera:

body {
    font-family: 'Roboto', sans-serif; /* Uso de tipografía personalizada */
}
        

Peso de las fuentes

El peso de las fuentes afecta no solo la apariencia, sino también la legibilidad. Puedes ajustar el peso de la fuente usando la propiedad font-weight. Los valores comunes son:

• normal (400)
• bold (700)
• Valores numéricos, como 100 (light) hasta 900 (extra bold)

Ejemplo de uso:

h2 {
    font-weight: bold; /* Peso de la fuente */
}
        

Alineación y justificación del texto

Además de elegir la fuente, también es importante la alineación y justificación del texto. Puedes hacerlo utilizando las propiedades text-align y text-justify. A continuación se muestra un ejemplo:

p {
    text-align: center; /* Alineación central */
    text-justify: inter-word; /* Justificación del texto */
}
        

Consideraciones finales

Dominar el uso de fuentes, tamaños y pesos en CSS3 es fundamental para cualquier desarrollador web. Con estas herramientas, puedes personalizar la tipografía de tus proyectos de manera que se alineen con la imagen y el propósito de tu marca.

Recuerda que cada elección tipográfica no sólo afecta la estética, sino también la accesibilidad. Siempre prueba diferentes combinaciones y asegúrate de que tu contenido sea fácil de leer para todos los usuarios.

Fuentes y lecturas recomendadas

• Tipografías en CSS – W3Schools
• Google Fonts – Biblioteca de tipografías
• Entendiendo los pesos de las fuentes – CSS-Tricks