🎨

Модуль 2. CSS и оформление

Занятие 14
Текст и шрифты

Сегодня мы сделаем текст красивым и удобным для чтения: подберём шрифты, размеры и интервалы.

👀

Сегодня сделаем вот такое

🔤

Типографика

95% сайта — это текст.

Удобный текст читают. Неудобный — закрывают.

Шрифт · размер · воздух между строками

<p class="bad">Этот текст очень трудно читать, потому что строки слиплись, буквы мелкие, а цвет почти сливается с фоном.</p>
<p class="good">А этот текст читать приятно: крупные буквы, контраст и воздух между строками.</p>
.bad { font-size: 11px; line-height: 1; color: #bbb; }
.good { font-size: 20px; line-height: 1.6; color: #2d3436; font-family: sans-serif; }
✒️

font-family — шрифт

  • Список через запятую — браузер берёт первый доступный
  • Последний — общий тип: sans-serif
  • Название с пробелом — в кавычках
<p class="sans">sans-serif — без засечек</p>
<p class="serif">serif — с засечками</p>
<p class="mono">monospace — для кода</p>
<p class="hand">cursive — рукописный</p>
p { font-size: 26px; margin: 8px 0; }
.sans { font-family: Verdana, sans-serif; }
.serif { font-family: Georgia, serif; }
.mono { font-family: "Courier New", monospace; }
.hand { font-family: cursive; }
📏

Размер и жирность

  • font-size: 18px — пиксели
  • font-size: 1.5rem — от базового (16px)
  • font-weight: 700 — жирный
  • font-style: italic — курсив
<h1>Космос</h1>
<p>Обычный текст 18px</p>
<p class="thin">Тонкий текст</p>
body { font-family: sans-serif; }
h1 { font-size: 3rem; font-weight: 900; }
p { font-size: 18px; }
.thin { font-weight: 300; font-style: italic; }
↔️

Оформление текста

  • text-align: center
  • line-height: 1.6 — воздух между строками
  • letter-spacing: 6px
  • text-transform: uppercase
  • text-shadow — тень
<h1>Космос</h1>
<p>Солнце — это звезда. Свет от него летит до Земли около восьми минут.</p>
body { font-family: sans-serif; }
h1 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 6px;
  color: #6c5ce7;
  text-shadow: 3px 3px 0 #dfe6e9;
}
p { font-size: 20px; line-height: 1.6; }
🅶

Google Fonts

  1. fonts.google.com → язык Cyrillic
  2. Выбрать шрифт → «Get embed code»
  3. Вставить <link> в head
  4. В CSS: font-family: "Nunito", sans-serif;

Без кириллицы русские буквы будут другим шрифтом!

📐

Правила красивого текста

  • ✌️ Не больше двух шрифтов
  • 📏 Строка — до 60–80 символов
  • 🔠 Заголовки заметно крупнее текста
  • 📢 БОЛЬШОЙ ТЕКСТ ЗАГЛАВНЫМИ — КАК КРИК
  • ⬅️ Длинный текст — по левому краю
🐞

Найди ошибки

Здесь 3 ошибки.

body {
  font-family: Trebuchet MS;
  line-height: 1.5px;
  font-weigth: bold;
}
🃏

Запомни!

  • font-familyШрифт
  • font-size: 18pxРазмер
  • font-weight: 700Жирность
  • text-align: centerВыравнивание
  • line-height: 1.5Межстрочный интервал
  • text-transform: uppercaseЗАГЛАВНЫЕ БУКВЫ
⌨️

Практика: Оформляем типографику

  1. Задай всей странице шрифт sans-serif и размер 18px.
  2. Выровняй заголовок по центру, сделай его крупнее и добавь letter-spacing.
  3. Задай абзацам line-height: 1.6 — сравни, стало ли удобнее читать.
  4. Подключи шрифт с Google Fonts (например, Nunito) к своей странице в VS Code.

🚀 Со звёздочкой: Сделай заголовок с тенью text-shadow и подбери пару шрифтов: один для заголовков, другой для текста.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Выбери на Google Fonts два шрифта с кириллицей для своего проекта.