Антон Куликов
10 марта 2014

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

Как работать с межстрочным расстоянием в блоках с разным размером текста?

Как найти и соблюдать «вертикальный ритм»?



Для начала выкиньте сетку базовых линий. Пока не устаканены основные соотношения, от неё только вред и лишние ограничения:


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

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

В левом варианте кегль настолько крупный, что строки короткие и прыгающие, а буквам тесно в блоке. Поэтому возьмём за основу ваш правый пример:


В нём заголовок нарушает «правило внутреннего и внешнего». По логике он должен составлять с текстом единую конструкцию, а на деле болтается между текстом и картинке.

Придвинем его поближе:


По «правилу внутреннего и внешнего» расстояние от линии подчёркивания заголовка до текста должно быть не меньше межстрочных просветов текста, чтобы заголовок не влезал в его интерлиньяж и не нарушал территориальную целостность.

Обратите внимание на розовый прямоугольник:


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

Напомню логику рассуждений: длина строки → интерлиньяж → расстояние до заголовка → левое поле → верхнее поле → повторить. То есть сначала нужно построить текстовый прямоугольник, найти его длину строки и интерлиньяж, а затем аккуратно поставить его «в угол». Затем снова перепроверить все соотношения.

Я не знаю, в каком стиле ваш сайт, но посоветовал бы «обинтеллигентить» толстенные рамки:


А то и вовсе обойтись без них:


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


См. совет о вертикальных отступах
P. S.

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

P. P. S.

Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Роман Горбачев
13 марта 2014

Подскажите, пожалуйста, в какой книге можно найти подобный материал?

Денис Шумов
27 марта 2014

«Но квадрат в углу — признак слабой, любительской, невнимательной вёрстки».

Это относится только к рассматриваемому примеру или общепринятое правило?


31 марта 2014

Это универсальное правило, тест на внимательного верстальщика.

Если дизайнер выбрал квадратные пропорции сознательно, это всегда очевидно.

Иван Мильков
11 сентября 2014

Артем, а если печатное издание имеет квадратные пропорции?

Недавно столкнулся с необходимостью доверстать несколько страниц в буклет. Размер страницы 210 на 210 мм. Соответственно, разворот 420 на 210 мм.
Поменять формат не представлялось возможным, так как часть тиража была напечатана — и надо было допечатывать внутренние страницы.

Суть:
«Прямоугольник в левом верхнем углу, который задает пропорции вёрстки» по классике должен соответствовать пропорциям страницы — то там должен стоять квадрат. Который, в свою очередь, является «признаком слабой, любительской, невнимательной вёрстки».

И действительно, как бы я ни выставлял поля и отступы — всегда что-то выбивалось из гармонии. В итоге я сделал всё на глаз, так как не нашёл решения, но хотелось бы знать на будущее — как поступать в таких случаях?

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

P. S. На развороте имеем: общий заголовок разворота, иллюстрацию (прямоугольную, большую, важную), подпись к ней, логотип, заголовок к текстовому блоку, который является началом предложения, которое продолжается в текстовом блоке. Тексты тоже править не было возможности.

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Cверстал одностраничный плеер. Вторая часть 3




Недавно всплыло

Собеседница психует и кидает трубку. Причём до этого дама была вполне адекватной, и мы нормально работали 1 Как флексить. Отступить от идеала 2 Я бы покрасил стены новой рабочей студии белой краской. А коллега хочет клеить обои 3 Как написать заказчику, что я установлю модуль на его сайт после окончательной оплаты, и при этом не обидеть его? 2