x
 
Константин Константинопольский
9 мая 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


Константин!

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

Давайте я продемонстрирую проблему на чём-нибудь простом, например, выборе кегля и интерлиньяжа. В совете о вёрстке текста Артём Горбунов рекомендует набирать основной текст кеглем в диапазоне 12…16 пунктов с интерлиньяжем 1,2…1,4 от значения кегля. Наберём текст, следуя этим рекомендациям:

Однажды Имо пошёл на рыбалку, но моря не было. Вообще ничего не было, кроме Имо. Тогда он плюнул на ладони и потёр одну о другую, и сделался шар, состоящий из моря. Потом Имо сделал несколько рыб, но они были ленивые и глупые. Тогда он взял души дельфинов, ведь дельфины хотя бы умели говорить, и смешал их с глиной, и помял в ладонях, и придал им форму, и они стали людьми.

Вердана, 15 п. / 20 п.

Вроде бы всё хорошо. Текст достаточно крупный, строки не слипаются и не выглядят слишком длинными по отношению к выбранному кеглю.

А теперь заменим Вердану на Бюросанс, не трогая кегль и интерлиньяж:

Однажды Имо пошёл на рыбалку, но моря не было. Вообще ничего не было, кроме Имо. Тогда он плюнул на ладони и потёр одну о другую, и сделался шар, состоящий из моря. Потом Имо сделал несколько рыб, но они были ленивые и глупые. Тогда он взял души дельфинов, ведь дельфины хотя бы умели говорить, и смешал их с глиной, и помял в ладонях, и придал им форму, и они стали людьми.

Бюросанс, 15 п. / 20 п.

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

Увеличим кегль на пару пунктов:

Однажды Имо пошёл на рыбалку, но моря не было. Вообще ничего не было, кроме Имо. Тогда он плюнул на ладони и потёр одну о другую, и сделался шар, состоящий из моря. Потом Имо сделал несколько рыб, но они были ленивые и глупые. Тогда он взял души дельфинов, ведь дельфины хотя бы умели говорить, и смешал их с глиной, и помял в ладонях, и придал им форму, и они стали людьми.

Бюросанс, 17 п. / 20 п.

Стало лучше, но всё ещё мелковато. Такой кегль в Бюросансе хорошо подойдёт для подписей, но основной текст хочет быть крупнее. Увеличим кегль ещё:

Однажды Имо пошёл на рыбалку, но моря не было. Вообще ничего не было, кроме Имо. Тогда он плюнул на ладони и потёр одну о другую, и сделался шар, состоящий из моря. Потом Имо сделал несколько рыб, но они были ленивые и глупые. Тогда он взял души дельфинов, ведь дельфины хотя бы умели говорить, и смешал их с глиной, и помял в ладонях, и придал им форму, и они стали людьми.

Бюросанс, 20 п. / 20 п.

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

Однажды Имо пошёл на рыбалку, но моря не было. Вообще ничего не было, кроме Имо. Тогда он плюнул на ладони и потёр одну о другую, и сделался шар, состоящий из моря. Потом Имо сделал несколько рыб, но они были ленивые и глупые. Тогда он взял души дельфинов, ведь дельфины хотя бы умели говорить, и смешал их с глиной, и помял в ладонях, и придал им форму, и они стали людьми.

Бюросанс, 20 п. / 27 п.

Теперь хорошо.

Итого: после простой замены одного шрифта на другой нам пришлось изменить и кегль, и интерлиньяж. А шрифтов тысячи.

А теперь давайте уменьшим ширину колонки:

Однажды Имо пошёл на рыбалку, но моря не было. Вообще ничего не было, кроме Имо. Тогда он плюнул на ладони и потёр одну о другую, и сделался шар, состоящий из моря. Потом Имо сделал несколько рыб, но они были ленивые и глупые. Тогда он взял души дельфинов, ведь дельфины хотя бы умели говорить, и смешал их с глиной, и помял в ладонях, и придал им форму, и они стали людьми.

Бюросанс, 20 п. / 27 п.

Текстовый блок снова стал уродливым. Такой широкой колонке не нужен такой большой интерлиньяж, он только ухудшает читаемость текста.

Уменьшим интерлиньяж:

Однажды Имо пошёл на рыбалку, но моря не было. Вообще ничего не было, кроме Имо. Тогда он плюнул на ладони и потёр одну о другую, и сделался шар, состоящий из моря. Потом Имо сделал несколько рыб, но они были ленивые и глупые. Тогда он взял души дельфинов, ведь дельфины хотя бы умели говорить, и смешал их с глиной, и помял в ладонях, и придал им форму, и они стали людьми.

Бюросанс, 20 п. / 24 п.

Стало гораздо лучше, но недостаточно хорошо. Дело в том, что этот кегль в принципе великоват для такой ширины колонки и такого количества текста (ага, количество текста тоже имеет значение). Если уменьшить и кегль, и интерлиньяж, то станет хорошо:

Однажды Имо пошёл на рыбалку, но моря не было. Вообще ничего не было, кроме Имо. Тогда он плюнул на ладони и потёр одну о другую, и сделался шар, состоящий из моря. Потом Имо сделал несколько рыб, но они были ленивые и глупые. Тогда он взял души дельфинов, ведь дельфины хотя бы умели говорить, и смешал их с глиной, и помял в ладонях, и придал им форму, и они стали людьми.

Бюросанс, 16 п. / 18 п.

Само собой, это уже не основной текст, а какая-то очень длинная подпись или вынос на полях.

После простого изменения ширины колонки нам опять пришлось менять кегль с интерлиньяжем. А ведь колонка может быть любой ширины.

Давайте ещё посмотрим, как всё это работает для заголовков. Наберём заголовок по тем же правилам, что и основной текст — интерлиньяж примерно в 1,2 раза больше кегля:

Народ, или Когда-то мы были дельфинами

Бюросанс, 72 п. / 90 п.

Сюрприз! Интерлиньяж кажется огромным, заголовок разваливается. Сильно-сильно уменьшим интерлиньяж, не трогая кегль:

Народ, или Когда-то мы были дельфинами

Бюросанс, 72 п. / 72 п.

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

Напоследок давайте изменим шрифт заголовка, не трогая остальное:

Народ, или Когда-то мы были дельфинами

Гельветика, 72 п. / 72 п.

Теперь кажется, что строки заголовка слиплись. Хочется слегка увеличить интерлиньяж:

Народ, или Когда-то мы были дельфинами

Гельветика, 72 п. / 81 п.

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

Внутреннее ≤ внешнее

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

Макет должен быть нарезан на прямоугольные модули

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

Якорные объекты — в углы или центр модуля

Якорные объекты — это самые заметные элементы: иллюстрации, заголовки, фактоиды, пиктограммы. Якорные объекты должны тяготеть к углам своего модуля или располагаться в его визуальном центре.

А ещё вот несколько рекомендаций с цифрами:

  • Хорошо, когда в строку умещается от 8 до 10 слов, а ширина основной колонки текста равна 60…70% ширины формата.
  • Хорошее соотношение кегля и интерлиньяжа в основном тексте — 1 к 1,2…1,4.
  • Базовый отступ между абзацами равен половине или целой пустой строке.
  • Отступ от заголовка до текста должен быть не меньше интерлиньяжа первого, а как правило даже больше.
  • Отступы между пунктами списка лучше делать слегка меньше, чем между абзацами. При этом расстояние от последнего пункта списка до текста ниже должно быть больше или равно обычному абзацному отступу.

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

Напоследок несколько советов по теме:

Приглашаю уважаемых советчиков поделиться своими наблюдениями. А вдруг кто-то знает способ всё привести к математике? Расскажите!

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

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт до 13 августа или пока есть свободные места.
 

Поделиться
Отправить

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

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

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

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

5 4 1




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

Почему вы используете jQuery для хождения по дереву и управления событиями? 2 2 Может быть есть возможность разбавить «боль» Синельникова «кайфом» Синельникова? 6 3