Tipografi mobile-first

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 7 dari 35.

Tipografi yang Mengutamakan Perangkat Seluler berarti memulai dengan gaya teks yang mudah dibaca di layar kecil, lalu menyesuaikannya untuk layar yang lebih besar menggunakan media query.

Kita menggunakannya karena pengguna ponsel membutuhkan font yang jelas dan mudah dibaca serta berfungsi dengan baik pada layar kecil. Jika teks terlalu kecil, teks menjadi sulit dibaca, dan jika terlalu besar di desktop, tampilannya bisa terlihat janggal.

Atur ukuran font dasar untuk perangkat seluler:

/* Gaya yang mengutamakan tampilan seluler */
body {
  font-size: 16px; /* ukuran dasar untuk seluler */
}

h1 {
  font-size: 1.5rem;
}

Perhatikan satuan rem yang digunakan untuk h1. rem adalah singkatan dari em akar. Satuan ini relatif terhadap ukuran font elemen akar, html (bukan body). Jadi, jika html memiliki font-size: 16px (nilai default browser), maka 1.5rem sama dengan 24px. Dengan menggunakan rem, kamu dapat menskalakan semua teks secara konsisten hanya dengan mengubah ukuran dasar.

Kemudian gunakan kueri media untuk menyesuaikan tampilan di layar yang lebih besar:

/* Layar yang lebih besar */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Tantangan

Mudah

Tugasmu:

Atur ukuran font judul <h1> menjadi 24px di perangkat seluler.
Atur ukuran font paragraf <p> menjadi 16px di perangkat seluler.
Buat media query untuk layar yang lebih lebar dari 768px yang:
- Meningkatkan ukuran font judul <h1> menjadi 36px. Gunakan selector header h1 di dalam media query agar ukurannya menggantikan ukuran di perangkat seluler di mana pun kamu mengaturnya.
- Meningkatkan ukuran font paragraf menjadi 20px.

Coba sendiri

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