Последнее время сетки стали навязчивой идеей среди дизайнеров. О них пишутся сотни статей. Тем не менее, в сетке нет ничего нового.

Сетки с вертикальным ритмом

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

960-Grid-System

Множество интерактивных учебных пособий, шаблонов и калькуляторов существует для создания сетки, однако далеко не все поддерживают и вертикальный ритм, столь важный для типографики.
Большинство сеток делят макет 960px на колонки по 12, 16, или 24 колонки. Часто эта разбивка — результат подгона под размеры баннеров и и других носителей рекламного характера. Например, 12-и колоночный макет идеально подходит для баннеров 300x250px и 300x600px, которые занимают как раз 4 колонки, или 1/3 страницы.

Однако же не стоит всё привязывать к сетке, ведь сетка это лишь инструмент, а не самоцель.

Вертикальная сетка

При перемещении элементов по вертикали также не стоит это делать произвольно. Здесь тоже есть свой ритм. Очень часто дизайнеры используют шаг в 5px и 10px, просто потому что эти расстояния удобно отмерять в Photoshop (стрелка курсора + Shift).

Это более-менее приемлемо для горизонтальной сетки (просто потому что 960px легко делиться на 10), но не подходит для типографического ритма.

Последнее время успехом пользуются вертикальные 6px-сетки. Итак, в чем же преимущество их использования?

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

Они очень удобно подходят под стандартные размеры 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 48, 60, 72 pts. — и они отлично сочетаются с интерлиньяжем, кратным 3 (особенно актуально при небольшом тексте). Например, основной текст можно представить как 14/18 (14px текст и 18px интерлиньяж), малый текст — 9/12.

Теперь вы легко найдете своё место не только для текста, но и для кнопок и меню. И хотя цель данной сетки — облегчить процесс дизайна, в конечном счёте она упрощает и работу с HTML/CSS.

 http://naikom.ru/blog/archives/5141

Сеточная система вёрстки

Маркус Гард, типограф | Оригинал статьи

  1. Пятиколонная Тора
  2. Триколонная Тора
  3. Маркус Гард и сетки по расчётам 
  4. Классические структуры
  5. Базовый метод расчёта сеток для Adobe Indesign
  6. Сетка для бумаги определённого формата
  7. Направляющие для выравнивания изображений
  8. Работаем с вертикальными направляющими
  9. Блоки строк и колонок
  10. Размещение горизонтальных блоков
  11. Сетка, привязанная к кеглю

 Маркус Гард. Сеточная система вёрстки.