Чои Вин - Как спроектировать современный сайт

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

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

Базовая сетка поможет выбрать параметры заголовков и подзаголовков – HTML-стилей Н1, Н2, НЗ и т. д. Заголовки Н1, как правило, имеют наибольший размер на странице, они обычно отделены от основного текста и поэтому их необязательно привязывать к базовым строкам. А заголовки Н2 и НЗ обязательно должны учитывать базовую сетку. Очевидно, что эти элементы оформления должны быть крупнее и/или более заметны, чем основной текст, но базовая сетка основана на интерлиньяже, а не на размере шрифта. Например, если мы выберем для заголовков Н2 размер 24 пт, интерлиньяж должен составить 26 пт (две базовые линии). Размер шрифта может колебаться в диапазоне от 22 до 30 пунктов, но межстрочный интервал при этом составляет 36 пунктов. Более точное значение определяется визуальной оценкой текста: попадают ли нижние выносные элементы букв (например, g и y) на расположенный ниже текст и достаточен ли интерлиньяж для удобства восприятия информации.

Не все параметры текста должны соответствовать сетке базовых строк. Здесь заголовок Н1 находится вне сетки

Расчет полей

Базовая сетка важна для расчета полей – точно рассчитанных горизонтальных областей страницы, помогающих в размещении сгруппированных элементов вдоль вертикальной оси. Поля могут быть полезны для расчета места, которое понадобится для размещения знака торговой марки и элементов навигации, расположенных в верхней части страницы, или оценки необходимого пространства для статьи.

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

Тем не менее поля должны помогать нам в достижении визуальной гармонии. Поля фиксированной высоты, расположенные сверху вниз, могут послужить основой для размещения главных элементов, но вместе с тем при необходимости их можно проигнорировать.

Определение областей усложняется при разной высоте страниц

Как подобрать правильную высоту этих полей? Нам поможет золотое отношение. Учтем разрешение экрана компьютера и используем золотое отношение, считая, что коэффициент приближенно равен 1,618. Разделив ширину страницы (960 пикселов) на 1,618, после округления получим 593.

Прямоугольник шириной 960 и высотой 593 пиксела почти идеально соответствует золотому отношению. Если разместить этот прямоугольник в верхней части страницы, его нижний край задаст границу поля. В нашей базовой сетке ближайшая линия находится на уровне 594 пикселов – 33-я строка сверху. И снова наши расчеты будут приближенными, так что полученное число можно использовать и считать, что горизонтальные поля будут разбивать страницу на фрагменты высотой 594 пиксела, начиная с верха страницы.

Высота полей рассчитывается с помощью золотого отношения

В этом прямоугольнике можно выделить квадрат со стороной 594 пиксела, правый край которого будет примерно совпадать с одной из созданных нами колонок. Это случайное совпадение, не основанное на математических расчетах, но оно подтверждает правильность расчета сетки.

Если поля будут идти друг за другом каждые 594 пиксела, это создаст множество проблем при расположении элементов. Многие веб-страницы заполнены блоками разных размеров, и не все из них поместятся в 594-пиксельную область. От базовой сетки требуется помощь в визуальном выравнивании и упорядочении любых элементов на всем сайте.

Конечно, можно использовать 18-точечную базовую сетку и выровнять элементы по любой из сотен базовых линий, но их слишком много. Нам нужно найти промежуточный вариант, что-то похожее на колоночную сетку.