July 15, 2022

Математика в типографике

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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