Tematización de la tipografía

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 15 de 35.

La tipografía es una parte importante de la tematización y el diseño. En lugar de escribir estilos de fuente por todas partes, podemos definirlos como variables CSS y reutilizarlos en todo el sitio. Esto mantiene el estilo consistente y hace que sea más fácil cambiarlo más adelante.

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 de tipografía 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 de tipografía 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 de texto para los párrafos (--text-color) — elige un color que no sea negro puro para una mejor legibilidad
- Color de texto para los encabezados ( --heading-color ) — elige un color que destaque del 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.

Hoja de referencia

Usa variables CSS para crear sistemas de tipografía consistentes definiendo estilos de fuente una vez y reutilizándolos en todo el sitio.

Define variables de tipografía 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;
}

Aplica variables a los elementos de texto usando var():

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);
}

Las variables de tipografía comunes incluyen:

Familia de fuentes (fuentes base y de encabezado)
Tamaños de fuente (tamaño base y tamaños de encabezado)
Altura de línea
Espaciado entre letras
Colores (colores de texto y de encabezado)

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>