Tematización de la tipografía

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 15 de 35.

La tipografía es una parte importante de los temas y del diseño. En lugar de escribir los estilos de fuente en todas partes, podemos definirlos como variables de CSS y reutilizarlos en todo el sitio. Esto mantiene la coherencia del estilo y facilita los cambios posteriores.

Puedes definir variables para:

familia de fuentes (p. ej., --font-family-base, --font-family-heading)

Tamaños de fuente (p. ej., --font-size-base, --font-size-h1)
Altura de línea
Espaciado entre letras

Primero, definamos nuestras variables tipográficas en el elemento :root:

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

Ahora, aplica estas variables a tus elementos de texto:

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

Esta configuración crea un sistema tipográfico unificado que puedes modificar fácilmente cambiando los valores de las variables en un solo lugar.

Desafío

Fácil

Crea un tema de tipografía para un sitio web de blog con variables separadas para los encabezados y el texto de los párrafos. Tu tarea:

Define variables CSS para:
- Tamaños de fuente para los encabezados (--h1-size y --h2-size)
- Color del texto de los párrafos (--text-color): elige un color distinto del negro puro para mejorar la legibilidad
- Color del texto de los encabezados ( --heading-color ): elige un color que destaque frente al texto del cuerpo
Aplica estas variables para dar estilo a:
- El texto del cuerpo
- Los encabezados h1 y h2

Tu CSS debe crear una jerarquía visual clara entre los encabezados y el texto de los párrafos.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Typography Theming</title>
  <style>
    :root {
      /* Typography variables */
      --primary-font: "Georgia", serif;       /* for paragraphs */
      --secondary-font: "Arial", sans-serif; /* for headings */

    }

    body {
      font-family: var(--primary-font);
      color: #000000;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f9f9f9;
    }

    h1, h2 {
      font-family: var(--secondary-font);
      color: #000000;
      margin-bottom: 0.5em;
    }

    h1 {
      font-size: 16px;
    }

    h2 {
      font-size: 16px;
    }

    p {
      margin-bottom: 1.2em;
    }

    .blog-post {
      max-width: 700px;
      margin: 0 auto;
      background: #fff;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="blog-post">
    <h1>The Beauty of Typography in Web Design</h1>
    <p>Typography plays a crucial role in how users read and experience content online. A good choice of fonts and sizes can make a website more readable and enjoyable.</p>

    <h2>Why Typography Matters</h2>
    <p>Clear and consistent typography improves accessibility, creates a visual hierarchy, and gives your website a professional feel. Without it, even the best design can look unpolished.</p>

    <h2>Mobile-First Typography</h2>
    <p>Starting with smaller, readable text for mobile and scaling up for desktops ensures your content looks great on any device. This approach is part of mobile-first design and theming.</p>
  </div>
</body>
</html>