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:

Visitar Google Fonts.
Elegir la fuente deseada y hacer clic en «Seleccionar esta fuente».
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.

blog.vermiip.es