Вертикальный ритм / базовая сетка в веб-дизайне

Недавно я прочитал несколько статей о важности хорошего вертикального ритма / использования базовой сетки для хорошей типографики в веб-дизайне. Я решил попробовать использовать базовую сетку, например, сетку 960, изображенную ниже, в качестве фонового изображения для темы веб-дизайна / WordPress, над которой я сейчас работаю.

Мне очень трудно все выстроить в сетку. Мне удалось получить все в вертикальной сетке с размером текста по умолчанию (16 пикселей), но когда я начинаю возиться с размером заголовков, добавлением изображений и т. Д., Элементы не всегда остаются правильно выровненными по сетке.

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

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

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

Итак, в целом, визуальный ритм важен, но выстраивайте его изнутри, а не из каких-то уравнений, которые просто сведут вас с ума, правильно внедряя в Интернете.

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

Вертикальный ритм не сложно реализовать, особенно если вы начинаете со сброса CSS . Я наткнулся на эту ссылку http://24ways.org/2006/compose-to-a-vertical-rhythm некоторое время назад, и с тех пор использовал технику во всех моих проектах.

Я обнаружил, что после работы с «постоянным» набором объявлений типов в моем файле CSS (h1 - h6, p и т. Д., В частности, размером, высотой строки, нижними полями) его очень легко развернуть.

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

Это может быть трудно увидеть, но когда оно повторяется как фоновое изображение: вы увидите сетку 20x20.

НТН

Примечание: мне нравится типография на сайтах, которые использовали эту технику лучше, чем те, которые не использовали. В обоих случаях, однако, всегда есть элемент или два, которые должны «обмануть систему», чтобы выглядеть «правильно». Я также обнаружил, что при обращении внимания на общую высоту строки (скажем, 18px для основы шрифта 12px) настройка полей и отступов вокруг изображений, графических заголовков и т. Д. Довольно прямолинейна (18px). Кроме того ... желание посчитать все исчезнет ... вы начнете замечать "вертикальный ритм" в макете и сможете вытянуть правый отступ / margin / line-height из очень короткого списка значений в твоей голове.

Эта очень хорошая статья в журнале Smashing Magazine о базовых и вертикальных ритмах дает вам некоторое представление о важности базовых линий в веб-дизайне и о том, как реализовать их в вашем CSS. Он использует font-size, line-height, padding и margin в HTML-элементах по умолчанию, чтобы все выровнялись с вашей базовой сеткой.

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

Я следовал этой методике для моих последних нескольких проектов, и я думаю, что это действительно окупается.