Блог графического дизайнера

Все о дизайне и для дизайна

Заказать дизайн

Вертикальный ритм. Как его использовать

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

Набивая шишки на своих собственных ошибках, вы скоро начнете понимать – какие они, эти правильные размеры, которые задают вертикальный ритм.

Определение вертикального ритма

Ритмом в веб дизайне является некая повторяющаяся закономерная последовательность. Если ритм определяется с закономерной частотой, то он считается точным и правильным. Когда на ум приходит ритм в веб дизайне, то сразу представляется пользователь, который просматривает страницы сайта, и сразу задает для себя наиболее удобную последовательность. Чем пропорциональнее будет эта последовательность, тем легче будет восприниматься информация на сайте.

Зачем нам все это?

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

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

Вертикальные ритмы имеют свойство меняться от одного шага к другому. Поэтому найти четкую систему регулировки такого  ритма не всегда просто. Нет какой-то константной величины, которая бы в один миг привела все в порядок. Это мы делаем сами.

Итак, на вертикальный ритм оказывают влияние в основном три фактора:

  • Интерлиньяж;
  • Размеры шрифтов;
  • Поля и отступы.

Чтобы было понятно, о чем я говорю, рассмотрим все эти составляющие по отдельности:

Интерлиньяж

Первое, что стоит запомнить – каким должен быть размер шрифта, установленный для всех текстов, а также интерлиньяж. Устанавливается это так:

font-size: 12px;

line-height: 1.5;

В моем примере основной размер – 12рх. Но чаще всего используется размер не менее 14рх. Интерлиньяж равен 1,5рх. Этот размер позволит добавить 6 рх в самый низ страницы. Так создается основной размер интерлиньяжа, а из него уже вертикальный ритм.

Отступы

В браузерах установлен стандарт, что отступ добавляется в верхнюю и нижнюю части абзацев. НО при этом римт может задаваться некорректно. Некоторые браузеры также имеют стандартный размер нижнего и верхнего отступов – 1em. Наша задача – сделать отступы того же размера, что и интерлиньяж. Потом вы увидите, что размер пустого места между абзацами равен размерам пустого места между строками. Это позволит визуально сделать текст более читабельным и гармоничным.

Сбрасываем настройки браузера

Советую всем сбрасывать настройки с помощью программы CSS Reset. Сама ею пользуюсь и нареканий не имею. Она может полностью очистить все стандартные настройки браузера, которые изначально там установлены. Так вы начинаете свою работу с нуля, и вам ничего не мешает. Нужно убрать отступы и поля в стилистической части браузера. Это делается так:

padding: 0;

    margin: 0;

Что делать с остальным текстом

Не будем забывать про заголовки, которые могут сыграть в тексте решающую роль. Между прочим, доказано, что пользователи сначала просматривают заголовки. И если они их заинтересуют, то они могут прочитать и текст. Необходимо первым делом установить размер для Н1. Стандарт 24 рх. Из-за такой установки размеры абзаца увеличиваются вдвое. Чтобы настройки для абзацев не поплыли, установим такой размер line-height заголовка h1 в 1.5em.

Соответственно Н2, Н3 и так далее, должны быть на 2 рх меньше последующего заголовка. Например, Р2-22 рх, Н3-20 и т.д.

Надеюсь, что вам теперь стали более доступны принципы установления вертикальных ритмов в CSS. Если у вас возникли какие-либо вопросы или предложения, то с удовольствием прочитаю о них в комментариях!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

*

*