Mobile-First-Typografie

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

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

Wir verwenden es, weil mobile Nutzer klare, lesbare Schriftarten benötigen, die auf kleinen Displays gut funktionieren. Wenn der Text zu klein ist, wird er schwer lesbar, und wenn er auf dem Desktop zu groß ist, kann er unvorteilhaft wirken.

Richten Sie Ihre Basis-Schriftgröße für Mobilgeräte ein:

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

h1 {
  font-size: 1.5rem;
}

Beachten Sie die für h1 verwendete Einheit rem. rem steht für root em — sie bezieht sich auf die Schriftgröße des Root-Elements body. Wenn body also font-size: 16px hat, entspricht 1.5rem gleich 24px. Die Verwendung von rem macht es einfach, Ihren gesamten Text konsistent zu skalieren, indem Sie nur die Basisgröße ändern.

Verwenden Sie dann Media Queries, um Anpassungen für größere Bildschirme vorzunehmen:

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

Aufgabe

Einfach

Deine Aufgabe:

Setze die Schriftgröße der <h1>-Überschrift auf Mobilgeräten auf 24px.
Setze die Schriftgröße der <p>-Absätze auf Mobilgeräten auf 16px.
Erstelle eine Media Query für Bildschirme, die breiter als 768px sind, welche:
- Die Schriftgröße der <h1>-Überschrift auf 36px erhöht.
- Die Schriftgröße der Absätze auf 20px erhöht.

Spickzettel

Mobile-First-Typografie beginnt mit Textstilen, die für kleine Bildschirme optimiert sind, und nutzt dann Media Queries zur Anpassung an größere Displays.

rem-Einheiten beziehen sich auf die Root-font-size (festgelegt auf body oder html). Wenn zum Beispiel body { font-size: 16px; } gilt, dann entspricht 1.5rem gleich 24px. Die Verwendung von rem hält Schriftgrößen konsistent und ermöglicht eine einfache Skalierung über verschiedene Bildschirmgrößen hinweg.

Legen Sie Basis-Schriftgrößen für Mobilgeräte fest:

/* Mobile-First-Styles */
body {
  font-size: 16px;
}

h1 {
  font-size: 1.5rem;
}

Verwenden Sie Media Queries zur Anpassung an größere Bildschirme:

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

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>