Tipografia Mobile-First

Parte da seção Frontend Prático do Journey de HTML da Coddy. Lição 7 de 35.

Tipografia com foco em dispositivos móveis significa começar com estilos de texto fáceis de ler em telas pequenas e, depois, ajustá-los para telas maiores usando consultas de mídia.

Usamos isso porque usuários de dispositivos móveis precisam de fontes nítidas e legíveis que funcionem bem em telas pequenas. Se o texto for pequeno demais, fica difícil de ler; se for grande demais em computadores, pode parecer estranho.

Configure o tamanho base da fonte para dispositivos móveis:

/* Estilos mobile-first */
body {
  font-size: 16px; /* tamanho base para dispositivos móveis */
}

h1 {
  font-size: 1.5rem;
}

Observe a unidade rem usada para h1. rem significa em da raiz. Ela é relativa ao tamanho da fonte do elemento raiz, html (não de body). Então, se html tiver font-size: 16px (o padrão do navegador), 1.5rem será igual a 24px. Usar rem facilita o redimensionamento consistente de todo o texto, alterando apenas o tamanho base.

Em seguida, use consultas de mídia para ajustar a exibição em telas maiores:

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

Desafio

Fácil

Sua tarefa:

Defina o tamanho da fonte do título <h1> como 24px em dispositivos móveis.
Defina o tamanho da fonte do parágrafo <p> como 16px em dispositivos móveis.
Crie uma consulta de mídia para telas com mais de 768px de largura que:
- Aumente o tamanho da fonte do título <h1> para 36px. Use o seletor header h1 na consulta de mídia, para que ele sobrescreva o tamanho para dispositivos móveis onde quer que você o defina.
- Aumente o tamanho da fonte dos parágrafos para 20px.

Experimente você mesmo

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