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

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

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

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

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

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

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

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

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

ХТН

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

Эта очень хорошая статья в журнале Smashing Magazine о базовых линиях и вертикальном ритме дает вам некоторое представление как о важности базовых линий в веб-дизайне, так и о том, как реализовать их в вашем css. Он использует размер шрифта, высоту строки, отступы и поля для элементов html по умолчанию, чтобы все соответствовало вашей базовой сетке.

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

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