Thématisation de la typographie

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 15 sur 35.

La typographie est un élément important de la personnalisation et du design. Au lieu d’écrire les styles de police partout, nous pouvons les définir comme des variables CSS et les réutiliser sur l’ensemble du site. Cela garantit la cohérence du style et facilite les modifications ultérieures.

Vous pouvez définir des variables pour :

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

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

Commençons par définir nos variables typographiques 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;
}

Applique maintenant ces variables à tes é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éfinir des variables CSS pour :
- Les tailles de police des titres (--h1-size et --h2-size)
- La couleur du texte des paragraphes (--text-color) : choisissez une couleur autre que le noir pur pour une meilleure lisibilité
- La couleur du texte des titres ( --heading-color ) : choisissez une couleur qui se distingue du texte du corps
Appliquer 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.

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>