Mobil Öncelikli Tipografi

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 7 / 35.

Mobil Öncelikli Tipografi, küçük ekranlarda okunması kolay metin stilleriyle başlamak, ardından bunları medya sorguları (media queries) ile daha büyük ekranlar için ayarlamak anlamına gelir.

Bunu kullanıyoruz çünkü mobil kullanıcıların küçük ekranlarda iyi çalışan net, okunabilir yazı tiplerine ihtiyacı var. Metin çok küçükse okunması zorlaşır ve masaüstünde çok büyükse tuhaf görünebilir.

Mobil için temel yazı tipi boyutunuzu ayarlayın:

/* Mobil öncelikli stiller */
body {
  font-size: 16px; /* mobil için temel boyut */
}

h1 {
  font-size: 1.5rem;
}

h1 için kullanılan rem birimine dikkat edin. rem, root em anlamına gelir — kök body yazı tipi boyutuna göredir. Yani body, font-size: 16px değerine sahipse, 1.5rem, 24px değerine eşit olur. rem kullanmak, yalnızca temel boyutu değiştirerek tüm metninizi tutarlı bir şekilde ölçeklendirmeyi kolaylaştırır.

Ardından, daha büyük ekranlara göre ayarlama yapmak için medya sorgularını kullanın:

/* Daha büyük ekranlar */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Görev

Kolay

Göreviniz:

Mobil cihazlarda <h1> başlık yazı tipi boyutunu 24px yapın.
Mobil cihazlarda <p> paragraf yazı tipi boyutunu 16px yapın.
768px'den daha geniş ekranlar için aşağıdakileri yapan bir medya sorgusu (media query) oluşturun:
- <h1> başlık yazı tipi boyutunu 36px değerine artırır.
- Paragraf yazı tipi boyutunu 20px değerine artırır.

Kopya kağıdı

Mobil öncelikli tipografi, küçük ekranlar için optimize edilmiş metin stilleriyle başlar, ardından daha büyük ekranlara uyum sağlamak için medya sorgularını (media queries) kullanır.

rem birimleri, kök font-size değerine (body veya html üzerinde ayarlanan) göredir. Örneğin, eğer body { font-size: 16px; } ise, 1.5rem, 24px değerine eşittir. rem kullanmak, yazı tipi boyutlarını tutarlı tutar ve ekran boyutları arasında ölçeklendirmeyi kolaylaştırır.

Mobil için temel yazı tipi boyutlarını ayarlayın:

/* Mobil öncelikli stiller */
body {
  font-size: 16px;
}

h1 {
  font-size: 1.5rem;
}

Daha büyük ekranlar için ayarlama yapmak üzere medya sorgularını kullanın:

/* Daha büyük ekranlar */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Kendin dene

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