Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все занятия обоих курсов, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт

HTML и CSS с нуля: создаём свои сайты Модуль 2. CSS и оформление

Занятие 2.2

Текст и шрифты

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

Изучаем: font-family, font-size, font-weight, text-align, line-height, Google Fonts
Результат: Оформляем типографику

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

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

Показать код примера 
<h1>Космос</h1>
<p class="lead">Самое интересное о звёздах и планетах</p>
<p>Солнце — это звезда. Свет от него летит до Земли около восьми минут. Если бы можно было доехать до Солнца на машине, дорога заняла бы больше ста лет.</p>
body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 18px;
  color: #2d3436;
  max-width: 600px;
}
h1 {
  font-size: 48px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 6px;
  color: #6c5ce7;
}
.lead {
  text-align: center;
  font-style: italic;
}
p {
  line-height: 1.6;
}

💡 Объяснение

Что такое типографика

Типографика — искусство оформления текста: какой шрифт выбрать, какого размера буквы, сколько места между строками. 95% любого сайта — это текст, поэтому от типографики зависит, захочется ли его читать. Мелкий, плотный, «пляшущий» текст люди просто закрывают.

Шрифт: font-family

body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

В font-family пишут список шрифтов через запятую. Браузер берёт первый, который есть на компьютере посетителя. Если никакого нет — используется последний, общий тип шрифта. Названия из нескольких слов берут в кавычки.

Общие типы шрифтов:

  • sans-serif — без засечек (Arial, Verdana). Чистые и современные, хорошо читаются на экране.
  • serif — с засечками — маленькими «хвостиками» на концах букв (Times New Roman, Georgia). Выглядят «книжно», торжественно.
  • monospace — моноширинный: все буквы одной ширины (Courier). Для кода.
  • cursive — рукописный. Только для заголовков и акцентов!

Размер: font-size

  • px — пиксели, точки экрана: font-size: 18px;. Обычный текст на сайтах — 16–20px.
  • rem — относительно базового размера страницы (обычно 16px): 1.5rem = 24px. Удобно: если человек увеличил шрифт в настройках браузера, всё увеличится пропорционально.
  • em — относительно размера шрифта родителя.

Насыщенность и стиль

  • font-weight — жирность: normal (400) или bold (700). Числа от 100 (очень тонкий) до 900 (очень жирный) работают, если у шрифта есть такие варианты.
  • font-style: italic — курсив.

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

  • text-align — выравнивание: left (по умолчанию), center, right, justify (по ширине). Длинный текст лучше выравнивать по левому краю, по центру — только заголовки и короткие подписи.
  • line-height — высота строки, «воздух» между строками. Значение без единиц, например 1.5, означает «в полтора раза больше размера шрифта». Для удобного чтения — 1.4–1.7.
  • letter-spacing — расстояние между буквами: 2px. Красиво для заголовков заглавными буквами.
  • text-transform — uppercase (ВСЕ ЗАГЛАВНЫЕ), lowercase, capitalize (Каждое Слово С Заглавной).
  • text-decoration — underline (подчеркнуть), none (убрать подчёркивание у ссылки), line-through (зачеркнуть).
  • text-shadow: 2px 2px 4px gray; — тень у текста.

Шрифты Google Fonts

Если нужен особенный шрифт, которого нет на компьютерах посетителей, его подключают из интернета. Бесплатная библиотека — Google Fonts (fonts.google.com):

  1. Открой сайт и в фильтре языков выбери Cyrillic (кириллица) — иначе русские буквы будут стандартным шрифтом.
  2. Выбери шрифт, например Nunito или Montserrat, и нажми «Get font» → «Get embed code».
  3. Скопируй теги <link> в head своей страницы (перед подключением style.css).
  4. В CSS напиши: font-family: "Nunito", sans-serif;

Правила хорошей типографики

  • Не больше двух шрифтов на сайте: один для заголовков, другой для текста.
  • Строка текста — не длиннее 60–80 символов. Слишком длинные строки трудно читать: глаз теряет начало следующей строки.
  • Заголовки заметно крупнее текста, чтобы была видна иерархия.
  • Не пиши большие тексты заглавными буквами — это воспринимается как крик.

Частые ошибки

  • Название шрифта с пробелом без кавычек.
  • Не указан запасной общий тип (sans-serif).
  • Шрифт Google без кириллицы — русский текст выглядит иначе, чем английский.
  • line-height: 1.5px — строки слипаются; для line-height лучше писать число без единиц.

Проверь себя

  1. Зачем в font-family указывают несколько шрифтов?
  2. Чем serif отличается от sans-serif?
  3. Какое значение line-height удобно для чтения?

⌨️ Практика

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

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

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

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход

💬 Вопросы по занятию

Не получается — спроси здесь. Другие ученики и преподаватель видят вопросы и отвечают. Пиши вежливо: грубые сообщения сайт не примет.

🔒 Писать могут только зарегистрированные. Читать обсуждение можно и без аккаунта. Регистрация · Вход

Вопросов пока нет. Задай первый — это помогает и тебе, и другим.