Равносторонний треугольник для создания идеального текста

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

Я разработал курс Better Web Type, чтобы помочь дизайнерам узнать, насколько важна типографика в веб-дизайне. Я считаю, что и дизайнеры, и разработчики должны владеть основами — и если дизайнер использует лигатуры, а разработчик даже не имеет понятия, что это такое, то как мы можем ждать от него правильного написания кода для изображения этой необычайно красивой типографики? Но если представители обеих профессий знают основы, мы сможем делать веб-сайты совершенней с помощью создания прекрасной типографики. И делать это вместе.

Одна из самых значимых вещей в типографике — создание беспрепятственного чтения, которое привлекает читателя и при этом объективно отражает содержимое. Для этого необходимо создавать идеальные абзацы. Существует три способа, и как сказал прославленный типограф и визуальный пропагандист 20 века Джозеф Мюллер-Брокманн:

Сообщение должно быть понятно и легкодоступно читателю. Это в немалой степени зависит от размера шрифта, от длины строки и межстрочного интервала (высоты строки).

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

Размер и цвет шрифта

Одна из ошибок большинства веб-сайтов — слишком маленький размер основного текста. Еще в начале 2000-х по умолчанию было принято писать весь текст размером 11px. Но тогда и экраны были меньше, и разрешение экрана ниже. И 11px выглядели больше, чем сейчас.

Общим правилом считается устанавливать размер основного текста так, чтобы он был равен размеру текста в книге на расстоянии вытянутой руки.

Выравнивание размера шрифта с размером текста в книге на расстоянии вытянутой руки. (Источник: iA)

Рекомендованный размер для современных экранов: 16px для смартфонов и 18-22px для десктопов. Также многое зависит от самого шрифта. Некоторые шрифты при размере 16px могут казаться значительно больше других, как вы можете увидеть на примере ниже.

Тот же самый текст в Merriweather кажется больше и тяжелее, чем в Georgia.

«Цвет шрифта» в типографике не означает непосредственно цвет типа красного, синего или зеленого. Цвет шрифта — это то, как темный тяжелый текст выглядит на светлом фоне. Два шрифта одинакового размера и веса могут ощущаться по-разному. Отличие шрифта Merriweather в приведенном выше примере — он ниже по сравнению с Georgia (если сравнивать засечки и разные основы). Поэтому он воспринимается тяжелее, а цвет шрифта кажется темнее.

Длина строки

При чтении очень длинных текстовых строк наши глаза довольно сильно устают. Им необходимы постоянные паузы, которые возникают благодаря обрыву строки. В момент переключения на следующую строку они успевают немного отдохнуть. Совсем чуть-чуть, но этого вполне достаточно. Чем-то напоминает двигатель, который не все время работает на полную мощность, поэтому дольше не перегревается.

Идеальная длина текстовой строки — 45-75 символов с пробелами. Если длина больше, текст будет гораздо сложнее читать, так как глаза просто не будут успевать отдохнуть. Если же длина меньше, придется слишком часто переключаться на следующие строки.

Рекомендованная длина строки в гиде Material Design от Google (Источник: material.io)

Высота строки

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

В интернете высота строки (интерлиньяж) работает иначе: она равномерно распространяется на области ниже и выше самой строки.

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

А это значит, высота строки устанавливается без лишних раздумий. Однако интерлиньяж слишком важен, чтобы с ним можно было так обращаться. Высота строки всегда зависит от ее длины. И чем длиннее строки, тем больше места необходимо оставлять между ними. Кроме того, высота также зависит от размера шрифта. Чем он больше, тем соответственно, больше должен быть интерлиньяж.

Цвет шрифта также влияет на высоту строки. Более темному и тяжелому тексту требуется больше межстрочного пространства. И даже сам шрифт может иметь значение. Как мы видели ранее, некоторые шрифты кажутся больше других. Некоторые — в особенности это касается шрифтов с засечками — будут казаться тяжелее. Следовательно, им также необходимо больше пространства.

Теперь, когда вы знаете, что высота строки — это очень важная штука, которую нельзя рассматривать изолированно, давайте посмотрим на самые оптимальные общепринятые правила. Для абзаца идеальная высота строки обычно колеблется от 1.3 до 1.7. Поэтому текст размером 16px должен иметь высоту строки где-то 21-26px. Все это также будет зависеть от вещей, о которых было сказано ранее: дизайн шрифта, его размер, вес и т.д.

Тот же тип шрифта, тот же размер: отличается только цвет. Чем темнее цвет, тем больше должна быть высота строки.

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

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

Равносторонний треугольник

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

Итак, мы подошли к так называемому Равностороннему Треугольнику Идеального Текста. Мы в отдельности рассмотрели размер шрифта, длину и высоту строки (насколько это возможно). Благодаря этому мы увидели, что все три характеристики тесно связаны между собой. О них нельзя думать по отдельности, не беря в расчет другие факторы. Вот почему равносторонний треугольник идеально отражает хорошо продуманный с точки зрения дизайна текст. Для него нам нужен хороший шрифт, размер которого будет соответствовать как длине, так и высоте строки. Сделаете неправильный выбор, и треугольник исказится.

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

Равносторонний треугольник отражает идеально сбалансированный текст.

В приведенном выше примере мы видим текст, написанный Merriweather — необычайно большим и тяжелым шрифтом. Поэтому мы устанавливаем размер на 14px. Высота строки, следовательно, ближе к верхнему пределу рекомендованного диапазона от 1.3 до 1.7. Абзац, расположенный выше, отлично вписывается в 55 знаков в строку (что также входит в рекомендованный диапазон).

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

В примере выше длина строки выходит за рамки рекомендованного диапазона 55-75. В среднем он достигает 84 знаков. Это означает, что основание треугольника сильно растянуто с обеих сторон.

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

Очевидно, что высота в примере выше слишком большая. Она установлена на 2 и выходит за рамки рекомендованного диапазона. Строки находятся очень далеко друг от друга. К сожалению, в веб-дизайне такое встречается слишком часто. Как будто сейчас стало модным делать текст светло-серым и устанавливать слишком большую высоту. Похоже на попытку добиться чистого минималистического стиля, но неудачная попытка. Такие тексты, особенно если они очень длинные, довольно трудно читать.

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