Это вводный абзац. Он должен быть чуть жирнее или крупнее остального текста. Типографика — это не просто шрифты, это атмосфера. Хорошо сверстанный текст читается легко, как книга любимого автора, а плохой — вызывает желание закрыть вкладку.
Заголовок H2: Основные принципы работы с контентом
Обычный абзац текста. Он должен быть удобочитаемым, с оптимальной высотой строки (line-height) и отступами. Важно, чтобы текст не сливался в одну серую массу, а разбивался на логические блоки. Также в тексте могут встречаться разные жирные выделения и курсивные акценты.
Жирный текст — используется для привлечения внимания к важным словам. Курсив (em) — обычно для терминов, названий или мыслей героя. Подчеркивание — лучше использовать только для ссылок, чтобы не путать пользователя. Выделение цветом — отличный способ сделать акцент.
Заголовок H3: Маркированные и нумерованные списки
Списки помогают структурировать информацию и делают пост читабельным.
- Первый пункт маркированного списка. Здесь может быть длинный текст с ссылкой внутри, чтобы проверить отступы.
- Второй пункт. Обратите внимание на отступы между элементами списка.
- Вложенный список (уровень 2). Важно проверить, как отображается вложенность.
- Еще один вложенный элемент. Шрифт должен быть меньше или отличаться.
- Третий пункт завершает список.
Иногда лучше использовать нумерацию:
- Первый шаг: открыть редактор.
- Второй шаг: вставить этот код.
- Третий шаг: наслаждаться результатом.
- Подпункт A (нумерация не сбрасывается).
- Подпункт B.
- Заключительный этап.
H2: Работа с таблицами, цитатами и кодом
Таблица
Таблицы часто нужны для сравнения характеристик или прайс-листов.
| Название услуги | Срок (дней) | Стоимость |
|---|---|---|
| Разработка лендинга | 14 | от 50 000 ₽ |
| Интернет-магазин (Коробка) | 30 | от 150 000 ₽ |
| Поддержка сайта (Тариф Базовый) | 30 (в месяц) | 10 000 ₽/мес |
Блок с цитатой
«Хороший дизайн — это когда вы не замечаете его, пока он не понадобится. А хорошая типографика — это когда вы забываете, что читаете, и погружаетесь в смысл».
— Стив Джобс (или кто-то очень умный)
Уровень H2: Горизонтальные разделители и мелкие элементы
Перед разделителем.
После разделителя. Как видите, есть четкая граница.
Это текст с тегом «small». Обычно используется для примечаний, подписей к фото или копирайта. Шрифт меньше основного.
Наш адрес: г. Москва, ул. Тверская, д. 1 (Тег address для контактной информации).Чеклист (имитация через список со стилями)
- Проверить отступы у заголовков
- Посмотреть, как выглядит жирный текст в абзацах
- Протестировать ссылки в разных местах
- Убедиться, что таблица не разваливается на мобильных
И напоследок жирный текст и курсив внутри одной строки, чтобы проверить одновременное использование этих тегов.
