Typographie Mobile-First

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

La typographie Mobile-First signifie commencer par des styles de texte faciles à lire sur de petits écrans, puis les ajuster pour des écrans plus grands à l'aide de media queries.

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

Configurez votre taille de police de base pour mobile :

/* Mobile-first styles */
body {
  font-size: 16px; /* base size for mobile */
}

h1 {
  font-size: 1.5rem;
}

Remarquez l'unité rem utilisée pour h1. rem signifie root em — elle est relative à la taille de police racine du body. Ainsi, si le body a un font-size: 16px, alors 1.5rem équivaut à 24px. L'utilisation de rem permet de mettre à l'échelle tout votre texte de manière cohérente en modifiant uniquement la taille de base.

Utilisez ensuite des media queries pour l'ajustement aux écrans plus grands :

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

Défi

Facile

Votre tâche :

Réglez la taille de la police du titre <h1> à 24px sur mobile.
Réglez la taille de la police du paragraphe <p> à 16px sur mobile.
Créez une media query pour les écrans plus larges que 768px qui :
- Augmente la taille de la police du titre <h1> à 36px.
- Augmente la taille de la police du paragraphe à 20px.

Aide-mémoire

La typographie mobile-first commence par des styles de texte optimisés pour les petits écrans, puis utilise des requêtes média (media queries) pour s'adapter aux écrans plus grands.

Les unités rem sont relatives à la taille de police racine (font-size) définie sur body ou html. Par exemple, si body { font-size: 16px; }, alors 1.5rem équivaut à 24px. L'utilisation de rem permet de garder des tailles de police cohérentes et faciles à adapter sur différentes tailles d'écran.

Définissez les tailles de police de base pour le mobile :

/* Styles mobile-first */
body {
  font-size: 16px;
}

h1 {
  font-size: 1.5rem;
}

Utilisez des requêtes média pour ajuster l'affichage sur des écrans plus grands :

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

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>