Tipografía Mobile-First

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 7 de 35.

Tipografía pensada primero para móviles significa empezar con estilos de texto que sean fáciles de leer en pantallas pequeñas y después ajustarlos para pantallas más grandes con consultas de medios.

Lo usamos porque los usuarios de dispositivos móviles necesitan fuentes claras y legibles que se vean bien en pantallas pequeñas. Si el texto es demasiado pequeño, cuesta leerlo, y si es demasiado grande en una computadora de escritorio, puede verse extraño.

Configura el tamaño base de fuente para móviles:

/* Estilos diseñados primero para móviles */
body {
  font-size: 16px; /* tamaño base para móviles */
}

h1 {
  font-size: 1.5rem;
}

Observa la unidad rem usada para h1. rem significa root em. Es relativa al tamaño de fuente del elemento raíz, html (no de body). Así que, si html tiene font-size: 16px (el valor predeterminado del navegador), entonces 1.5rem equivale a 24px. Usar rem facilita escalar todo el texto de forma uniforme cambiando únicamente el tamaño base.

Después, usa consultas de medios para adaptarlo a pantallas más grandes:

/* Pantallas más grandes */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Desafío

Fácil

Tu tarea:

Establece el tamaño de fuente del encabezado <h1> en 24px en dispositivos móviles.
Establece el tamaño de fuente del párrafo <p> en 16px en dispositivos móviles.
Crea una consulta de medios para pantallas con un ancho superior a 768px que:
- Aumente el tamaño de fuente del encabezado <h1> a 36px. Usa el selector header h1 en la consulta de medios para que sobrescriba el tamaño para dispositivos móviles dondequiera que lo establezcas.
- Aumente el tamaño de fuente del párrafo a 20px.

Pruébalo tú mismo

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