Текст некомфортно читать, когда в напечатанном слове или фразе проблемы с межбуквенным расстоянием: буквы либо слиплись, либо, наоборот, находятся слишком далеко друг от друга. Чтобы этого избежать и привести текст в порядок, нужно настроить интервал между буквами и другими символами вручную. С этим поможет кернинг. Кернинг — изменение расстояния между буквами, цифрами, знаками препинания и другими символами в тексте для удобочитаемости. В этой статье мы расскажем о правилах в кернинге, которые пригодятся начинающим дизайнерам. Стандартное расстояние между буквами не всегда подходит. Бывает, что математически равные интервалы создают дискомфорт при чтении. В таком случае промежутки выставляют таким образом, чтобы расстояние между буквами было одинаковым визуально, а не фактически. Посмотрите на пример ниже. При равных интервалах в слове курс буквы стоят слишком далеко друг от друга. Это связано с тем, что все символы имеют уникальную форму, и в сочетании друг с другом дают разный результат. Поэтому и подход к каждой паре букв (символов) должен быть индивидуальный. Продолжайте читать, чтобы узнать о правилах кернинга и почему так важно их соблюдать. Также в статье вы найдете девять советов от экспертов, руководствуясь которыми вы станете профессионалом. Оптическая площадь символов Кернинг — это важный процесс, благодаря которому слова и, следовательно, весь текст выглядит аккуратно. Особенно это касается заголовков и логотипов. Наверное, вы уже видели такие картинки, на которых изображены буквы из дерева или металла. Заметьте, каждая буква заключена в рамку. Цифровые шрифты устроены также: каждый символ окружен невидимым блоком, и иногда из-за этого блока расстояние между буквами становится слишком большим. Поэтому рамку одной буквы перекрывают рамкой другой буквы, чтобы создать нужный промежуток. Когда типографы выбивали текст на печатных машинах, им приходилось вырезать выемки в блоках, тем самым сокращая расстояние. Теперь этот процесс намного легче, и изменить расстояние можно несколькими щелчками мыши. Как кернить шрифт Кернинг не так сложен, если понимать, как он работает. Важная часть процесса — определение на взгляд, какое расстояние лучше. Но существуют приемы, которые используют, чтобы упростить процесс: 1. Следите за определенными комбинациями букв Форма некоторых символов затрудняет их написание, особенно тех, которые имеют сильный наклон или вытянутые элементы. Также слова, состоящие из заглавных букв, требуют дополнительного внимания. Вернемся к идее, что каждый символ окружен невидимым блоком: некоторые буквы не заполняют его полностью и оставляют свободное место, которое повлияет на расстояние между буквами. На какие подвиды делятся буквы: прямые (М, Н, П); закругленные (З, О, Ф); полузакругленные. У них одна сторона прямая, а другая — закругленная (В, Р, Ю, Я); полуоткрытые (Е, С, Э); открытые в обе стороны (Ж, Т, Х). открытые в левую сторону (Ч, Э, З); открытые в правую сторону (Е, С, Г). Если буква в середине слова вызывает проблему, посмотрите, как она взаимодействует с буквами с обеих сторон. Например, первая а в ранение выглядит хорошо рядом с н, но создает большой разрыв рядом с р. 2. Понимайте связь между пространством и формой буквы В предыдущем пункте мы сфокусировались на том, насколько проблемными могут быть пары заглавных букв, но строчные буквы тоже иногда вызывают сложности. Это связано с тем, что прямые и закругленные буквы выглядят иначе в паре друг с другом, чем в паре с представителями своего подвида. Правила расстановки интервалов: большее расстояние выставляем между прямыми буквами; немного уменьшаем интервал, если рядом стоят прямая и закругленная буквы; еще меньший интервал оставляем между двумя закругленными буквами; и самое маленькое расстояние настраиваем между буквами с открытой стороной. На картинке ниже видно, как уменьшается расстояние между буквами. Но если рассматривать пример без цветных полос, промежуток между символами выглядит одинаково. Давайте применим правило к слову, а не к отдельным буквам. Смотреть нужно на буквы сразу с двух сторон и выставлять одинаковое расстояние для каждой пары, которые мы обсуждали выше. В слове керамика расстояние между прямыми буквами выделено синей полосой, между прямой и округлой — бирюзовой полосой, а между округлыми — оранжевой. Если убрать полосы, то расстояние кажется одинаковым. Необязательно использовать этот шрифт, но, помня о правиле, вы достигните оптимального визуального интервала между словами или фразами, особенно если столкнулись с неудачной комбинацией букв. 3. Обратите внимание на размер шрифта Размер шрифта влияет на межбуквенные интервалы, ведь буквы разного кегля часто взаимодействуют по-разному. Если задать заголовок в 48 пунктов, а затем изменить на 24, расстояние между буквами придется настраивать заново. По этой причине рекомендуется сначала определиться с размером шрифта, а после этого регулировать расстояние между буквами. Или, если вы работаете над логотипом, который напечатают на визитной карточке и на футболке, настройте шрифт и интервалы для каждого формата отдельно. Имейте в виду, что ошибки кернинга (или игнорирование его) будут наиболее очевидны, когда вы работаете с большими буквами. Для букв бо́льшего кегля можно увеличить расстояние, но для букв меньшего размера нужно использоваться более свободное расположение, ведь они и так стоят достаточно плотно. Подробнее об этом в следующем разделе. 4. Помните об удобочитаемости Если буквы небольшого кегля, то их плотное расположение делает текст трудночитаемым. Иногда они стоят настолько близко к друг другу, что становятся похожими на другую букву. Из-за этого человек прочитает слово неправильно или перепутает его с другим. Удобочитаемость и разборчивость — главные критерии в типографике. Поэтому лучше увеличить расстояние между буквами, чтобы исключить неправильное толкование и не заставлять читателей напрягать глаза. 5. Переверните слово Иногда трудно определить, где изменить промежуток, потому что мозг воспринимает слово целеком, а не его отдельные символы. Один из способов сместить фокус — перевернуть слово вверх ногами. Прием поможет сосредоточиться на форме букв и расстоянии между ними вместо того, чтобы отвлекаться на само слово. 6. Приступайте к кернингу в последнюю очередь Кернинг занимает последнее место в проекте. Сначала убедитесь, что выбрали подходящий шрифт, и только после этого переходите к кернингу, ведь каждый шрифт уникален. Если вы поменяете его, то придется перенастраивать и промежутки между буквами. Кернинг — последний шаг, благодаря которому текст будет читаться легче и выглядеть более чистым и аккуратным. Но перед тем, как переходить к ручному кернингу, уделите внимание автоматическому межбуквенному интервалу и интерлиньяжу. В некоторых программах можно выбрать автоматические настройки межстрочного интервала. У этих настроек есть два режима: метрический и оптический. В метрике используются встроенные параметры кернинга, которые разработал дизайнер шрифта. Оптический же отменяет эти настройки, изменяя интервал между символами и вычисляя расстояние в соответствии с алгоритмом. Если слова с автоматическим кернингом выглядит аккуратно, то вручную настраивать ничего не придется. Межстрочный интервал также влияет на читабельность текста. Если не вникать в подробности, то главное правило такое: чем длиннее строка, тем больше интервал между строками; чем больше кегль, тем меньше интервал. Интерлиньяж должен быть больше на 2–3 пункта, чем размер кегля. 7. Знайте, когда кернить не нужно Как мы уже упоминали, кернинг более заметен в заголовках, названиях, логотипах, на баннерах и тому подобном. Самый наглядный пример — обложки журналов. Но кернинг не нужен, когда: 1. Текст написан 10, 11 или 12 кеглем. 2. В шрифт встроено много кернинговых пар. В большинстве случаев разработчики шрифтов учитывают все уникальные сочетания символов и устраняют потребность в ручном кернинге, особенно при наборе текста абзацами. Просмотр всей страницы, заполненной текстом, займет несколько часов, а у вас может и не быть этого времени. Так что не торопитесь приступать к кернингу всего текста и определите, каким элементам типографии стоит уделить больше времени. 8. Практикуйтесь в кернинге Кернинг — одна из тех концепций дизайна, в которой действительно важна практика и понимание, как это работает и как это сделать. Помимо введения кернинга в собственные проекты, подтянуть знания в кернинге и получить обратную связь можно с помощью веб-игры под названием Kerntype. В игре нет никаких инструкций: вам дают слово, в котором первая и последняя буквы заблокированы. Вы должны переместить оставшиеся буквы, чтобы создать видимость одинакового интервала. После того, как изменили расстояние между буквами, можно сравнить варианты, выбрав «оба». Ваша работа с кернингом белого цвета, а рекомендуемая — синего. Также в приложении ставят оценку: она зависит от того, насколько близко вы подошли к рекомендуемому промежутку. Такое упражнение поможет овладеть навыком и привыкнуть к настройке кернинга. 9. Для веб-дизайнеров: вы тоже можете кернить Считается, что настройкой кернинга занимаются только графические дизайнеры, которые работают над журналами, книгами, брошюрами и подобными проектами. Но с тех пор, как появился Интернет, веб дизайнеры и программисты, разбирающиеся в шрифтах, тоже захотели кернить, чтобы их проекты выглядели еще лучше. И для этого создали сайт Kerning.js. Это скрипт, который позволяет управлять кернингом в вебтипографии с помощью CSS. Текс на картинке: Kerning.js. Контролируйте веб-типографику. CSS, познакомься с кернингом. Кернинг, познакомься с CSS. Керните, стилизуйте, трансформируйте и масштабируйте веб-шрифт автоматически с помощью правил CSS. Дизайнеры типографии слишком долго не испытывали трудностей с печатью. Уже 2014 год — Интернет существует более двух десятилетий, но веб-дизайнеры до сих пор не контролируют полностью типографику? Забудьте об этом, используя Kerning.js! Расстановка букв в словах, или Кернинг «Вопрос об определении правильных расстояний между буквами и словами имеет в шрифтовой графике огромное значение. Качество надписи зависит как от правильных пропорций букв, так и от правильного определения расстояния между ними. Как бы превосходно ни были спроектированы буквы, надпись будет плохо выглядеть, если эти буквы будут небрежно расставлены». Т. И. Куцын «Начертания шрифтов» Пособие для архитекторов и инженеров. Москва 1950 г. Сразу договоримся, что мы не рассматриваем случаи акциденции, в которой возможны любые исключения и даже нарочитый дисбаланс. Мы обратимся к классическому набору текста и заголовков, созданных для комфортного чтения, а не для привлечения внимания. С графической точки зрения всякую надпись можно рассматривать как некое ритмическое чередование букв: …причём в эту рифму играют как сами буквы («чёрное»), так промежутки между ними («белое»): Классическая хорошая расстановка букв в слове достигается равномерным распределением площадей белого и чёрного. Площадь чёрного зависит от шрифтовой гарнитуры (её начертания и просветов внутри букв). В соответствии с этим подбирается белое. Присматриваясь дальше и абстрагируясь от буквы, мы начинаем наблюдать ритмику вертикальных, горизонтальных, наклонных, полукруглых элементов буквы, как в самой себе, так и со своими соседями. Красота и сложность ритма гарнитуры во многом зависят от задумки проектировщика шрифта. Поэтому в каждом шрифте есть свой уникальный ритм, и все межбуквенные расстояния следует гармонизировать в соответствии с ним. Есть границы, в пределах которых мы можем варьировать межбуквенное расстояние (оно определяется пропорциями букв). Самое большое расстояние между буквами — то, при котором слово ещё не разваливается на несвязные отдельные элементы, а самое маленькое — когда буквы не сливаются и еще есть дифференциация, т. е. одна буква ещё легко отделяется глазом от другой. Здесь мы сами становимся авторами того эффекта, который будет производить наша надпись. Будет ли она рыхлой или подтянуто-стройной — зависит от нас. Это также зависит от задачи. В зависимости от идеи мы выбираем соответствующий шрифт и добиваемся кернингом гармонической равномерности. К слову сказать, те же простые правила ритма относятся и к полосе набора в смысле ритмики строк. Текст не должен рассыпаться на несвязные строки и не должен слипаться в один «кусок глины». Типы букв и общие правила расстановки По характеру графемы буквы условно делятся на пять подвидов: прямоугольные — с вертикальными элементами (И, М); округлые (О, Ф); полуокруглые — с прямыми элементами с одной стороны и закругленными с другой (В, Ю); полуоткрытые— с одной открытой стороной (Г, Е, С); открытые (Ж, Т). Если слово состоит только из букв с вертикальными элементами, то механическая расстановка с равными расстояниями даст вполне удовлетворительный результат: Но как только в игру вступают более сложные формы, начинаются «слипания и дырки». Тут следует уравнивать площади между буквами. Есть много геометрических методик, но, честно признаюсь, они мне кажутся весьма сложными, а полезными только при проектировании шрифтов в создании массива кернинговых пар. Поэтому рассмотрим общие правила и метод расстановки «по тройкам». Общие правила просты: наибольшее расстояние окажется между «прямоугольными буквами». Несколько меньшее расстояние требуется, если буква с прямолинейными элементами граничит c буквой округлой формы. Ещё меньшее расстояние требуется между двумя круглыми буквами. И ещё меньшее — с буквами имеющими открытые формы. Метод расстановки тройками 1. В слове выбирается самая сложная кернинговая пара, зазор между буквами которой будет самым узким — это либо две округлые буквы, либо комбинации букв с открытыми формами. Такая пара кернится первой. 2. Далее слово кернится вправо и влево от этой пары. К выбраной откерненной паре мы прибавляем соседнюю букву, получая тройку букв и рассмативаем только эту тройку. Двигая новую букву, добиваемся равномерности площадей белого в этой тройке. Дальше сдвигаем тройку на одну букву в сторону и керним следующую букву. И таким образом проходим всё слово. При должном навыке вы будете делать это автоматически и весьма быстро. Для новичков напомню: чтобы изменить кернинг пары, не нужно выделять букву, достаточно поставить перед ней курсор и двигать букву сочетанием Alt+влево/Alt+вправо. Рассмотрим это на примере абстрактного слова «инговый». Выбираем сложную пару букв. В этом слове это — «го». И задаем минимальное расстояние между этими буквами. Это расстояние теперь будет диктовать нам весь ритм «белого» в слове. Все остальные межбуквенные расстояния будут больше выбранного. Теперь выбираем первую тройку, например «гов». И выравниваем расстояние между «о» и «в», чтобы визуально площадь между ними была равна площади между «г» и «о». Дальше берём тройку «овы», потом «вый». И так цепочками проходим по всему слову, получая результат. При наложении можно заметить, как раздвинулось слово в процессе кернинга: Как кернить ещё лучше В текстовом режиме при кернинге происходят довольно большие дискретные сдвиги букв, и это, ко всему прочему, влияет на остальные кернинговые пары. Поэтому для самого лучшего результата работайте с текстом в «Иллюстраторе», после чего переводите текст в кривые, разгруппировывайте, ставьте в преференсах маленький инкремент смещения. Тогда вы сможете двигать буковки с очень небольшим шагом, добиваясь оптимального баланса. Кернинг экранного текста Если нужно поставить текст картинкой на банер или плашку, особенно в мелких кеглях (ниже 15 пикселей), приходится особенным образом работать с текстом. Текст в мелких кеглях за счёт режима сглаживания «бьётся и плывет». Есть несколько полезных советов, как с этим бороться. 1. Поиграть с разными режимами сглаживания. 2. Подбирать кегль таким образом, чтобы горизонтальные штрихи не расплывались. Для большинства шрифтов такие значения кегля по странным причинам являются дробными. 3. Кернить. Сначала, поставив курсор перед первой буквой, используя стрелки при нажатой клавише Alt, добиться чётких вертикальных штрихов. После чего перейти к кернингу отдельных пар. 4. Хорошо работает приём, когда текст набирается в иллюстраторе и через copy-paste вставляется в фотошоп, особенно для наклонных надписей. Есть такая хитрость: если во время набора текста выбран режим сглаживания Smooth, а в «Фотошопе» выключен Snap, то, если, не переключаясь с инструмента Type, нажать и держать Command, можно двигать текст туда-сюда и при большом увеличении заметить, что буквы растеризуются по-разному: расплываются разные штрихи. Можно выбрать самый чистенький вариант и потом уже настраивать кернинг. На последнем этапе выбираем инструмент «карандаш» толщиной 1px и ручками дорисовываем алиасинг, где нужно. А где нужно стираем, добиваясь равномерности надписи и правильной формы буквы, если она «побилась».
