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

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

У нас есть технология.

В прошлом году, да и в этом было много разговоров об использовании сеток в дизайне сайтов. Mark дал нам lesson plan, Khoi case study и 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.

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

Translated with the permission of A List Apart Magazine and the author[s].