Tipografia Mobile-First

Parte da seção Practical Frontend do Journey de HTML da Coddy — lição 7 de 35.

Tipografia Mobile-First significa começar com estilos de texto que sejam fáceis de ler em telas pequenas e, em seguida, ajustá-los para telas maiores com media queries.

Nós o usamos porque os usuários de dispositivos móveis precisam de fontes claras e legíveis que funcionem bem em telas pequenas. Se o texto for muito pequeno, ele se torna difícil de ler, e se for muito grande no desktop, pode parecer estranho.

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

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

h1 {
  font-size: 1.5rem;
}

Observe a unidade rem usada para h1. rem significa root em — ela é relativa ao tamanho da fonte da raiz (body). Portanto, se o body tiver font-size: 16px, então 1.5rem equivale a 24px. O uso de rem facilita o redimensionamento de todo o seu texto de forma consistente, alterando apenas o tamanho base.

Em seguida, use media queries para ajustar para 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 cabeçalho <h1> como 24px no mobile.
Defina o tamanho da fonte do parágrafo <p> como 16px no mobile.
Crie uma media query para telas maiores que 768px que:
- Aumente o tamanho da fonte do cabeçalho <h1> para 36px.
- Aumente o tamanho da fonte do parágrafo para 20px.

Folha de consulta

A tipografia mobile-first começa com estilos de texto otimizados para telas pequenas e, em seguida, usa media queries para ajustar para telas maiores.

As unidades rem são relativas ao font-size raiz (definido no body ou html). Por exemplo, se body { font-size: 16px; }, então 1.5rem equivale a 24px. O uso de rem mantém os tamanhos de fonte consistentes e fáceis de dimensionar em diferentes tamanhos de tela.

Defina os tamanhos de fonte base para dispositivos móveis:

/* Estilos mobile-first */
body {
  font-size: 16px;
}

h1 {
  font-size: 1.5rem;
}

Use media queries para ajustar para telas maiores:

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

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>