Mobile-First-Typografie

Teil des Abschnitts Praktisches Frontend der HTML-Journey von Coddy. Lektion 7 von 35.

Mobile-First-Typografie bedeutet, mit Textstilen zu beginnen, die auf kleinen Bildschirmen gut lesbar sind, und sie dann mithilfe von Media Queries für größere Bildschirme anzupassen.

Wir verwenden es, weil mobile Nutzer klare, gut lesbare Schriftarten benötigen, die auf kleinen Displays gut funktionieren. Ist der Text zu klein, lässt er sich schwer lesen, und ist er auf dem Desktop zu groß, kann er unpassend wirken.

Lege deine Basis-Schriftgröße für Mobilgeräte fest:

/* Mobile-First-Stile */
body {
  font-size: 16px; /* Basisgröße für Mobilgeräte */
}

h1 {
  font-size: 1.5rem;
}

Beachte die für h1 verwendete Einheit rem. rem steht für root em. Sie ist relativ zur Schriftgröße des Wurzelelements html (nicht von body). Wenn html also font-size: 16px hat (die Standardgröße des Browsers), entspricht 1.5rem 24px. Mit rem kannst du den gesamten Text ganz einfach einheitlich skalieren, indem du nur die Basisgröße änderst.

Verwende dann Media Queries, um die Darstellung für größere Bildschirme anzupassen:

/* Größere Bildschirme */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Aufgabe

Einfach

Deine Aufgabe:

Lege die Schriftgröße der <h1>-Überschrift auf Mobilgeräten auf 24px fest.
Lege die Schriftgröße des <p>-Absatzes auf Mobilgeräten auf 16px fest.
Erstelle eine Medienabfrage für Bildschirme, die breiter als 768px sind und Folgendes bewirkt:
- Erhöhe die Schriftgröße der <h1>-Überschrift auf 36px. Verwende in der Medienabfrage den Selektor header h1, damit er die mobile Schriftgröße an jeder Stelle überschreibt, an der du sie festlegst.
- Erhöhe die Schriftgröße des Absatzes auf 20px.

Probier es selbst

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