Школа
Вёрстка

Как создавался новый сайт бюро. Часть четвёртая: сетка

Максим Семенов
8 мар 2017
👁 10999  
Вёрстка

Как создавался новый сайт бюро. Часть четвёртая: сетка

Максим Семенов
8 мар 2017
👁 10999  
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
 18
18
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать

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

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

Ключевые стили сайта на девятипиксельной сетке базовых линий

Сетке не подчиняются тянущиеся иллюстрации. Они встают на кратном девяти расстоянии от других элементов, но свой размер меняют без привязки к сетке.

Самое большое удовольствие: верстать многоколончатые страницы. Базовые линии строк в разных колонках совпадают друг с другом, как в хорошем печатном журнале. В будущем таких страниц будет больше.

Чтобы увидеть сетку прямо на сайте, нажмите Ctrl+G и двигайте её вверх‑вниз стрелочками на клавиатуре:

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика в вебеБюро
Полезно
 18
18
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы