Оформление текста, часть 1 / Вертикальный ритм текста [15/16]
×

Вертикальный ритм текста [15/16]

В веб-дизайне существует понятие «вертикальный ритм текста». Оно достаточно сложное и мы не будем глубоко в него вдаваться. Отметим лишь, что хороший вертикальный ритм улучшает восприятие текста.

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

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

Дополнительные материалы для тех, кто заинтересовался вертикальным ритмом: О вёрстке вертикального ритма, Compose to a Vertical Rhythm, Создание вертикального ритма на сайте, Генератор вертикального ритма.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Вертикальный ритм текста</title> </head> <body> <h1>Вертикальный ритм</h1> <p>В веб-дизайне существует понятие «вертикальный ритм текста». Оно достаточно сложное и мы не будем глубоко в него вдаваться. Отметим лишь, что хороший вертикальный ритм улучшает восприятие текста.</p> <h1>Правило относительных размеров</h1> <p>Чтобы сохранить вертикальный ритм и хорошую читабельность текста при любом размере шрифта, нужно задавать размеры шрифта, межстрочный интервал и вертикальные отступы между заголовками и абзацами в относительных единицах.</p> <p>Тогда, как бы пользователь ни изменял размер шрифта, ваш текст останется читабельным и удобным для восприятия. В этом задании вы потренируетесь использовать относительные единицы измерения.</p> </body> </html>
CSS
body { font-size: 12px; line-height: 16px; } h1 { margin-top: 12px; font-size: 16px; } p { margin-top: 6px; margin-bottom: 6px; }
HTML Academy
  1. Для body задайте font-size: 24px;. Смотрите, как слипся текст.
  2. Для body задайте межстрочный интервал 1.3.
  3. Для заголовка измените размер шрифта на 1.3em, а отступ сверху на 0.7em.
  4. Для абзацев измените отступы на 0.5em.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

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

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.