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

9

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

960 сетка

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

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

Santaji
источник

Ответы:

7

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

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

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

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

DA01
источник
2
Точно - вы смешиваете яблоки и орангутаны. Это все равно что пытаться достать обложку книги в мягкой обложке, чтобы воспроизвести видео в формате Flash. Если вы не сделаете все в виде изображения, а весь ваш сайт будет в формате JPG с графическими картами, этого просто не произойдет.
Лорен-Клир-Моника-Ипсум
Это не так сложно, чтобы ваши CSS и HTML соответствовали сетке 960. В конце концов, кодирование - это просто математика. Кроме того, в основном все дизайнеры на (например) themeforest.net используют его. Это не так сложно, как вы говорите. И да ... концепция сетки происходит из мира печати. Тем не менее, сетка 960 преобразуется для Интернета, чтобы соответствовать минимальному разрешению 1024x768.
Луук
2
Сетка 960 в первую очередь предназначена для создания горизонтальных сеток, и я очень рекомендую это для сайтов даже умеренных размеров. Это очень полезный инструмент. Тем не менее, мы говорим о вертикальной базовой линии. Да, кодирование это математика. Увы, браузеры и спецификация CSS не предоставили особых возможностей для определения базовых форм букв. Вы можете сопоставить это со своей математикой, но вы зависите от отдельных браузеров, операционных систем, установленных шрифтов и пользовательских настроек, так что совсем не «простая математика», чтобы заставить работать базовый аспект типа сетки.
DA01
Кроме того, дизайн не всегда чистая математика. На самом деле, это редко чистая математика. Математика подводит нас к точке, но помимо этого, эстетическое суждение глаза должно прийти на место. Я создавал сайты, используя базовую сеточную систему, как для себя, так и для других дизайнеров, и чаще всего нам приходится отбрасывать базовую сетку в конце, чтобы она «выглядела» правильно. Я решил, что из-за этого обычно бесполезно пытаться заставить базовую сетку работать, поскольку это обычно произвольная вещь.
DA01
1
Хм, у меня недостаток чтения;) Я не заметил, речь идет только о вертикальной ритме. Я должен согласиться, что я действительно не использую 960gs для вертикального ритма. Только для горизонтального. Единственное, что я использую по вертикали - это «сгиб». Остальное я выровняю (еще раз по вертикали) "глазом".
Луук
4

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

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

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

введите описание изображения здесь

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

НТН

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

Доусон
источник
2

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

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

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

Винсент
источник