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

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

В прошлом году было много разговоров об использовании сеток в дизайне сайтов. Mark дал нам план урока, Khoi - тематическое исследование, а Cameron - toolkit. Здесь все ясно, у нас есть поддержка браузеров, знания и инструменты для создания многоколонной разметки.
Мы можем внести некоторые принципы пропорциональности и баланса в наши страницы с помощью другой техники хорошо известной в печатном деле - базовой сетки.

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

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

Первое, что мы должны сделать - это выбрать высоту линий сетки. Я выбрал стандартный размер шрифта 12 пикселей и высоту линий 18 пикселей, чтобы получить хороший Лидинг в 150%. Очень важно заранее определить какую высоту линий вы будете использовать. Вы должны выбрать отношение размера шрифта до высоты так, чтобы читабельность текста была лучшей.

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

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

Начнем с того, что установим margin и padding для всех элементов равным 0, чтобы не беспокоится о том какие значения браузер использует по умолчанию. На практике нам понадобиться более сложная конструкция, но для примера достаточно использовать селектор *.

* {
margin: 0;
padding: 0;
}

Мы хотим добавить пространство между параграфами, но значение по умолчанию равен 1 em (в нашем случае это 12px) не подходит для сетки, установим нижнее поле пункта в 18px.

p {
margin-bottom: 18px;
}

Когда будем создавать заголовки важно установить высоту строки кратную 18, а также добавить нижнее поле 18px.

h1 {
font-size: 24px;
line-height: 36px;
margin-bottom: 18px;
}

h2 {
font-size: 18px;
line-height: 18px;
margin-bottom: 18px;
}

h3 {
font-size: 12px;
line-height: 18px;
}

Алгоритм прост, если нужно добавить отступы или поля, они должны быть кратны 18, чтобы линии соответствовали сетке, не обязательно добавлять сразу 18 точек, можно использовать пары, которые в сумме дают 18, например верхний предел 12 пикселей, а нижнюю - 6 .
Списки

Мы привыкли задавать пространство, между элементами списка, после или перед списком. Зависимости от шага сетки можно задать больше пространства (целую линию сетки) не задавать его вовсе.

ul, ol {
margin-bottom: 18px;
}

Плавающие элементы и боковые панели

Внесем немного порядка и сюда. Изображения и другие плавающие элементы в тексте должны иметь высоту кратную шагу сетки, в нашем примере 18 пикселям. Если размер изображения не кратен 18, можно добавить к нему рамку, размер которой будет соответствовать этому требованию. Текст около изображения должен заканчиваться на той же линии сетки, где и само изображение.

. Left {
float: left;
margin: 0 18px 18px 0;
}

. Right {
float: right;
margin: 0 0 18px 18px;
}

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

. Callout {
border: 1px solid # ddd;
padding: 8px 10px;
margin-bottom: 18px;
}

Заметьте, что я задал отступы снизу и сверху равными 8 пикселям, поскольку рамка дает еще 2 пикселя (8 + 8 + 1 + 1 = 18).
Также нужно убрать нижнюю границу последнего элемента, чтобы в конце вставки не было слишком большого пространства. Это не критично для нашей разметки (потому что отступление соответствует сетке), но все же я решил исправить это и использовал псевдо-класс: last-child, IE6 конечно его не понимает, но это не сильно влияет на разметку.

. Callout: last-child {
margin-bottom: 0;
}

Еще одна важная вещь, о которой вы должны помнить, создавая вставки и боковые панели - это высота строк, она не должна меняться, даже если вы делаете текст мелким, для 11 и 10 пиксельных шрифтов, высота строки 18 пикселей остается удобной для чтения .
Наша страница полностью соответствует сетке.

Вы можете просмотреть этот пример, приведенный с использованием описанной выше техники. Если Вы не верите мне, не нужно доставать линейку, а просто просмотрите этот же пример с видимой сеткой.

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

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

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

Вы можете использовать относительные единицы измерения, но это значительно усложнит вычисления. Очень просто задать высоту строк 18 пикселей (line-height: 1.5em), но когда Вам понадобиться использовать шрифты другого размера придется проделать немалые вычисления, чтобы задать высоту строки который бы соответствовал базовой сетке, причем различные способы округления, использующих браузеры, только усложняют задачу. Однако это возможно и если вы хотите попробовать эту технику с относительными размерами шрифтов, я рекомендую Вам хорошую статью Ричарда Руттера "Compose to a Vertical Rhythm".

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