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. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.
Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

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

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

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

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

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

В презентации много нарушений правил типографики и вёрстки, но при этом она нравится 1 Влезание в интерлиньяж 5




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

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