Tipografia mobile-first

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 7 di 35.

Tipografia progettata prima per i dispositivi mobili significa partire da stili di testo facili da leggere sugli schermi piccoli, per poi adattarli agli schermi più grandi con le media query.

Lo usiamo perché gli utenti di dispositivi mobili hanno bisogno di caratteri chiari e leggibili che funzionino bene su schermi piccoli. Se il testo è troppo piccolo, diventa difficile da leggere, mentre se è troppo grande su desktop può sembrare poco armonioso.

Imposta la dimensione di base del carattere per i dispositivi mobili:

/* Stili mobile-first */
body {
  font-size: 16px; /* dimensione di base per dispositivi mobili */
}

h1 {
  font-size: 1.5rem;
}

Nota l'unità rem usata per h1. rem sta per root em. È relativa alla dimensione del carattere dell'elemento radice body. Quindi, se body ha font-size: 16px, allora 1.5rem equivale a 24px. Usare rem semplifica il ridimensionamento coerente di tutto il testo, modificando solo la dimensione di base.

Poi usa le media query per adattare il layout agli schermi più grandi:

/* Schermi più grandi */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Sfida

Facile

Il tuo compito:

Imposta la dimensione del carattere dell'intestazione <h1> su 24px sui dispositivi mobili.
Imposta la dimensione del carattere del paragrafo <p> su 16px sui dispositivi mobili.
Crea una media query per gli schermi più larghi di 768px che:
- Aumenti la dimensione del carattere dell'intestazione <h1> a 36px.
- Aumenti la dimensione del carattere del paragrafo a 20px.

Provalo tu

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