Typographie Mobile-First

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

La typographie pensée d’abord pour les mobiles consiste à commencer par des styles de texte faciles à lire sur les petits écrans, puis à les ajuster pour les écrans plus grands à l’aide de requêtes média.

Nous l’utilisons parce que les utilisateurs mobiles ont besoin de polices claires et lisibles qui s’affichent bien sur les petits écrans. Si le texte est trop petit, il devient difficile à lire, et s’il est trop grand sur ordinateur, il peut sembler maladroit.

Définissez la taille de police de base pour les appareils mobiles :

/* Styles conçus d’abord pour les mobiles */
body {
  font-size: 16px; /* taille de base pour les mobiles */
}

h1 {
  font-size: 1.5rem;
}

Remarquez l’unité rem utilisée pour h1. rem signifie em racine. Elle est relative à la taille de police de l’élément racine, html (et non de body). Donc, si html a font-size: 16px (la valeur par défaut du navigateur), alors 1.5rem équivaut à 24px. L’utilisation de rem permet de mettre facilement à l’échelle tout votre texte de manière cohérente en ne modifiant que la taille de base.

Utilisez ensuite les requêtes média pour adapter l’affichage aux écrans plus grands :

/* Écrans plus grands */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Défi

Facile

Ta tâche :

Définis la taille de police du titre <h1> à 24px sur mobile.
Définis la taille de police du paragraphe <p> à 16px sur mobile.
Crée une requête média pour les écrans de plus de 768px de largeur qui :
- Augmente la taille de police du titre <h1> à 36px. Utilise le sélecteur header h1 dans la requête média, afin qu’il remplace la taille pour mobile, quel que soit l’endroit où tu la définis.
- Augmente la taille de police du paragraphe à 20px.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Typography</title>
  <style>
    /* ===== Mobile-First Styles ===== */
    :root {
      --base-font-size: 16px; 
    }

    body {
      font-size: var(--base-font-size);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.5;
      background-color: #f0f8ff;
      color: #333;
    }

    header {
      background: url('https://upload.wikimedia.org/wikipedia/commons/a/af/Female_polar_bear_%28Ursus_maritimus%29_with_cub%2C_Svalbard.jpg')
                  center/cover no-repeat;
      color: white;
      text-align: center;
      padding: 50px 20px;
    }

    header h1 {
      margin: 0;
    }

    .subtitle {
      margin-top: 10px;
      font-size: 1rem;
      opacity: 0.9;
    }

    main {
      padding: 20px;
    }

    h2 {
      color: #2c6e91;
      font-size: 1.25rem;
    }

    ul {
      padding-left: 20px;
    }

    li {
      margin-bottom: 10px;
    }

    footer {
      background-color: #2c6e91;
      color: white;
      text-align: center;
      padding: 15px;
      font-size: 0.9rem;
    }

    /* ===== Larger Screens ===== */

  </style>
</head>
<body>
  <header>
    <h1>Polar Bears – Kings of the Arctic</h1>
    <p class="subtitle">Discover the life of the world's largest land carnivore</p>
  </header>

  <main>
    <section>
      <h2>About Polar Bears</h2>
      <p>
        Polar bears are magnificent animals that live in the Arctic region. 
        They are excellent swimmers, using their large paws to paddle through icy waters 
        in search of seals, their main source of food. These bears have thick layers of 
        fat and dense fur to keep them warm in extreme cold.
      </p>
    </section>

    <section>
      <h2>Interesting Facts</h2>
      <ul>
        <li>Polar bears can weigh up to 700 kg (1,500 lbs).</li>
        <li>They have black skin under their white fur to absorb heat.</li>
        <li>Polar bears can swim for days without resting.</li>
        <li>They are listed as vulnerable due to climate change.</li>
      </ul>
    </section>

    <section>
      <h2>Protecting Polar Bears</h2>
      <p>
        Climate change and melting sea ice threaten polar bear habitats. 
        Protecting these amazing creatures requires global efforts to 
        reduce greenhouse gas emissions and preserve their Arctic environment.
      </p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Arctic Wildlife. All rights reserved.</p>
  </footer>
</body>
</html>