Ejercicio 18 — Propiedades de Fuente en CSS

En esta actividad se experimenta con distintas propiedades relacionadas con las fuentes en CSS: font-family, font-size, font-weight, letter-spacing, line-height y text-transform. La finalidad es entender cómo influye cada propiedad en la legibilidad, jerarquía visual y estilo general del texto.

Enunciado

Asigna fuentes serif, sans-serif y la importada “Roboto”.
Experimenta con tamaños como 24px y 16px.
Prueba pesos como normal, bold o numéricos.
Aplica transformaciones con uppercase, lowercase o capitalize.
Modifica el espaciado entre letras.
Aumenta el interlineado para mejorar la lectura.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Práctica de Propiedades de Fuente en CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Estilizando Fuentes con CSS</h1>
    <p class="parrafo1">Este es el primer párrafo...</p>
    <p class="parrafo2">Este segundo párrafo es ideal para experimentar...</p>
    <p class="parrafo3">En este párrafo final, intenta usar una fuente personalizada...</p>
</body>
</html>

Código CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

h1 {
    font-family: sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
}

.parrafo1 {
    font-family: serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
}

.parrafo2 {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: capitalize;
}

.parrafo3 {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
    text-transform: none;
}

🚀 Ver resultado del ejercicio