Thématisation de la typographie

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 15 sur 35.

La typographie est une partie importante du thème et du design. Au lieu d'écrire des styles de police partout, nous pouvons les définir comme des variables CSS et les réutiliser sur l'ensemble du site. Cela permet de garder un style cohérent et facilite les modifications ultérieures.

Vous pouvez définir des variables pour :

Famille de polices (par ex., --font-family-base, --font-family-heading)

Tailles de police (par ex., --font-size-base, --font-size-h1)
Hauteur de ligne
Espacement des lettres

Tout d'abord, définissons nos variables de typographie dans l'élément :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;
}

Maintenant, appliquez ces variables à vos éléments de texte :

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

Cette configuration crée un système de typographie unifié que vous pouvez facilement modifier en changeant les valeurs des variables à un seul endroit.

Défi

Facile

Créez un thème typographique pour un site web de blog avec des variables distinctes pour les titres et le texte des paragraphes. Votre tâche :

Définissez des variables CSS pour :
- Les tailles de police pour les titres (--h1-size et --h2-size)
- La couleur du texte pour les paragraphes (--text-color) — choisissez une couleur autre que le noir pur pour une meilleure lisibilité
- La couleur du texte pour les titres ( --heading-color ) — choisissez une couleur qui se démarque du texte du corps
Appliquez ces variables pour styliser :
- Le texte du corps
- Les titres h1 et h2

Votre CSS doit créer une hiérarchie visuelle claire entre les titres et le texte des paragraphes.

Aide-mémoire

Utilisez les variables CSS pour créer des systèmes de typographie cohérents en définissant les styles de police une seule fois et en les réutilisant sur l'ensemble du site.

Définissez les variables de typographie dans l'élément :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;
}

Appliquez les variables aux éléments de texte en utilisant 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);
}

Les variables de typographie courantes incluent :

Famille de polices (polices de base et de titre)
Tailles de police (taille de base et tailles de titre)
Hauteur de ligne
Espacement des lettres
Couleurs (couleurs du texte et des titres)

Essayez vous-même

<!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>