Tipografía Mobile-First

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 7 de 35.

Tipografía Mobile-First significa comenzar con estilos de texto que sean fáciles de leer en pantallas pequeñas, y luego ajustarlos para pantallas más grandes mediante media queries.

Lo usamos porque los usuarios de dispositivos móviles necesitan fuentes claras y legibles que funcionen bien en pantallas pequeñas. Si el texto es demasiado pequeño, se vuelve difícil de leer, y si es demasiado grande en el escritorio, puede verse extraño.

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

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

h1 {
  font-size: 1.5rem;
}

Observa la unidad rem utilizada para h1. rem significa root em — es relativa al tamaño de fuente raíz del body. Por lo tanto, si body tiene font-size: 16px, entonces 1.5rem equivale a 24px. El uso de rem facilita el escalado de todo el texto de forma coherente con solo cambiar el tamaño base.

Luego, utiliza media queries para realizar ajustes en 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:

Haz que el tamaño de fuente del encabezado <h1> sea 24px en dispositivos móviles.
Haz que el tamaño de fuente del párrafo <p> sea 16px en dispositivos móviles.
Crea una media query para pantallas más anchas de 768px que:
- Aumente el tamaño de fuente del encabezado <h1> a 36px.
- Aumente el tamaño de fuente del párrafo a 20px.

Hoja de referencia

La tipografía "mobile-first" comienza con estilos de texto optimizados para pantallas pequeñas y luego utiliza media queries para ajustarlos a pantallas más grandes.

Las unidades rem son relativas al font-size raíz (establecido en body o html). Por ejemplo, si body { font-size: 16px; }, entonces 1.5rem equivale a 24px. El uso de rem mantiene los tamaños de fuente consistentes y fáciles de escalar en diferentes tamaños de pantalla.

Establece los tamaños de fuente base para móviles:

/* Mobile-first styles */
body {
  font-size: 16px;
}

h1 {
  font-size: 1.5rem;
}

Utiliza media queries para ajustar el diseño en pantallas más grandes:

/* Larger screens */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

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>