Типографика Mobile-First

Часть раздела Practical Frontend путешествия по HTML на Coddy — урок 7 из 35.

Mobile-First типографика означает, что сначала создаются стили текста, которые удобно читать на небольших экранах, а затем они адаптируются для более крупных экранов с помощью медиа-запросов.

Мы используем это, потому что мобильным пользователям нужны четкие, разборчивые шрифты, которые хорошо смотрятся на маленьких экранах. Если текст слишком мелкий, его становится трудно читать, а если он слишком крупный на десктопе, это может выглядеть неуклюже.

Настройте базовый размер шрифта для мобильных устройств:

/* Стили Mobile-first */
body {
  font-size: 16px; /* базовый размер для мобильных */
}

h1 {
  font-size: 1.5rem;
}

Обратите внимание на единицу измерения rem, используемую для h1. rem означает root em — она относительна корневого размера шрифта body. Таким образом, если у body задан font-size: 16px, то 1.5rem будет равно 24px. Использование rem позволяет легко и последовательно масштабировать весь текст, изменяя только базовый размер.

Затем используйте медиа-запросы для адаптации под большие экраны:

/* Большие экраны */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Задание

Легко

Ваша задача:

Установите размер шрифта заголовка <h1> равным 24px для мобильных устройств.
Установите размер шрифта абзаца <p> равным 16px для мобильных устройств.
Создайте медиа-запрос для экранов шире 768px, который:
- Увеличивает размер шрифта заголовка <h1> до 36px.
- Увеличивает размер шрифта абзаца до 20px.

Шпаргалка

Типографика в стиле mobile-first начинается со стилей текста, оптимизированных для небольших экранов, а затем использует медиа-запросы для адаптации под более крупные дисплеи.

Единицы rem рассчитываются относительно корневого font-size (установленного для body или html). Например, если body { font-size: 16px; }, то 1.5rem будет равно 24px. Использование rem позволяет сохранять размеры шрифтов согласованными и упрощает их масштабирование для разных размеров экрана.

Установите базовые размеры шрифтов для мобильных устройств:

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

h1 {
  font-size: 1.5rem;
}

Используйте медиа-запросы для адаптации под большие экраны:

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

Попробуйте сами

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