Алексей Максимов
12 июня 2011

Здравствуйте, Андрей!

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

Как кернить текст? Расскажите, пожалуйста. Или подскажите где можно об этом прочитать.



Расстановка букв в словах, или Кернинг

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

Т. И. Куцын «Начертания шрифтов» Пособие для архитекторов и инженеров. Москва 1950 г.

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

С графической точки зрения всякую надпись можно рассматривать как некое ритмическое чередование букв:

…причём в эту рифму играют как сами буквы («чёрное»), так промежутки между ними («белое»):

Классическая хорошая расстановка букв в слове достигается равномерным распределением площадей белого и чёрного. Площадь чёрного зависит от шрифтовой гарнитуры (её начертания и просветов внутри букв). В соответствии с этим подбирается белое.

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

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

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

Здесь мы сами становимся авторами того эффекта, который будет производить наша надпись. Будет ли она рыхлой или подтянуто-стройной — зависит от нас.

Это также зависит от задачи. В зависимости от идеи мы выбираем соответствующий шрифт и добиваемся кернингом гармонической равномерности.

К слову сказать, те же простые правила ритма относятся и к полосе набора в смысле ритмики строк. Текст не должен рассыпаться на несвязные строки и не должен слипаться в один «кусок глины».

Типы букв и общие правила расстановки

По характеру графемы буквы условно делятся на пять подвидов:

  • прямоугольные — с вертикальными элементами (И, М);
  • округлые (О, Ф);
  • полуокруглые — с прямыми элементами с одной стороны и закругленными с другой (В, Ю);
  • полуоткрытые— с одной открытой стороной (Г, Е, С);
  • открытые (Ж, Т).

Если слово состоит только из букв с вертикальными элементами, то механическая расстановка с равными расстояниями даст вполне удовлетворительный результат:

Но как только в игру вступают более сложные формы, начинаются «слипания и дырки». Тут следует уравнивать площади между буквами. Есть много геометрических методик, но, честно признаюсь, они мне кажутся весьма сложными, а полезными только при проектировании шрифтов в создании массива кернинговых пар.

Поэтому рассмотрим общие правила и метод расстановки «по тройкам». Общие правила просты: наибольшее расстояние окажется между «прямоугольными буквами». Несколько меньшее расстояние требуется, если буква с прямолинейными элементами граничит c буквой округлой формы. Ещё меньшее расстояние требуется между двумя круглыми буквами. И ещё меньшее — с буквами имеющими открытые формы.

Метод расстановки тройками 

  1. В слове выбирается самая сложная кернинговая пара, зазор между буквами которой будет самым узким — это либо две округлые буквы, либо комбинации букв с открытыми формами. Такая пара кернится первой.
  2. Далее слово кернится вправо и влево от этой пары. К выбраной откерненной паре мы прибавляем соседнюю букву, получая тройку букв и рассмативаем только эту тройку. Двигая новую букву, добиваемся равномерности площадей белого в этой тройке. Дальше сдвигаем тройку на одну букву в сторону и керним следующую букву. И таким образом проходим всё слово. При должном навыке вы будете делать это автоматически и весьма быстро.
Для новичков напомню: чтобы изменить кернинг пары, не нужно выделять букву, достаточно поставить перед ней курсор и двигать букву сочетанием Alt+влево/Alt+вправо.

Рассмотрим это на примере абстрактного слова «инговый». Выбираем сложную пару букв. В этом слове это — «го». И задаем минимальное расстояние между этими буквами.

Это расстояние теперь будет диктовать нам весь ритм «белого» в слове. Все остальные межбуквенные расстояния будут больше выбранного.

Теперь выбираем первую тройку, например «гов».

И выравниваем расстояние между «о» и «в», чтобы визуально площадь между ними была равна площади между «г» и «о».
Дальше берём тройку «овы», потом «вый». И так цепочками проходим по всему слову, получая результат.
При наложении можно заметить, как раздвинулось слово в процессе кернинга:

Как кернить ещё лучше

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

Кернинг экранного текста

Если нужно поставить текст картинкой на банер или плашку, особенно в мелких кеглях (ниже 15 пикселей), приходится особенным образом работать с текстом. Текст в мелких кеглях за счёт режима сглаживания «бьётся и плывет». Есть несколько полезных советов, как с этим бороться.

  1. Поиграть с разными режимами сглаживания.
  2. Подбирать кегль таким образом, чтобы горизонтальные штрихи не расплывались. Для большинства шрифтов такие значения кегля по странным причинам являются дробными.
  3. Кернить. Сначала, поставив курсор перед первой буквой, используя стрелки при нажатой клавише Alt, добиться чётких вертикальных штрихов. После чего перейти к кернингу отдельных пар.
  4. Хорошо работает приём, когда текст набирается в иллюстраторе и через copy-paste вставляется в фотошоп, особенно для наклонных надписей.
Есть такая хитрость: если во время набора текста выбран режим сглаживания Smooth, а в «Фотошопе» выключен Snap, то, если, не переключаясь с инструмента Type, нажать и держать Command, можно двигать текст туда-сюда и при большом увеличении заметить, что буквы растеризуются по-разному: расплываются разные штрихи. Можно выбрать самый чистенький вариант и потом уже настраивать кернинг.

На последнем этапе выбираем инструмент «карандаш» толщиной 1px и ручками дорисовываем алиасинг, где нужно. А где нужно стираем, добиваясь равномерности надписи и правильной формы буквы, если она «побилась».

Вот кратко основы. Мне думается, этого достаточно, чтобы понимать суть процесса и начать тренироваться в этом направлении :-). Удачи!

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

Плюсануть
Поделиться

Комментарии

Илья Муравьёв
12 июня 2011

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

Алексей Максимов
14 июня 2011

Андрей, спасибо за ответ-совет.

Эдуард Гомоляко
20 июня 2011

Неужели это нельзя автоматизировать?

Иван Титов
26 июня 2011

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

Александр Колодько
1 декабря 2011

Подскажите, а как лучше кернить числа с единицей, например годы (2011, 2012)?

Арахнид Скорпидинов
8 января 2012

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

Василий Макаров
21 декабря 2012

Я, вероятно, неправильно понял принцип расстановки букв. Не могли бы вы пояснить, почему в слове «ритм» на приложенной мной картинке буква «т» между двух прямоугольных букв стоит на разных расстояниях?

Павел Васильцов
4 июня 2013

Василий, буква У «утягивает» композицию на себя своим большим по весу белым полем, что и компенсируется более сжатым кернингом.

Можно также обратить внимание, что расстояния между ИТ и ИТ неизменны в обоих словах. Так что в надписи всё закономерно и соответствует совету.

Аля Селезнёва
1 декабря 2013

Помогите, пожалуйста, как быть с сочетанием букв АЛ и АН в классических шрифтах, где буквы А и Л близки к форме треугольника?

И есть ли какие-либо специальные правила для шрифтов с засечками?

Светлана Финохина
25 марта 2014

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

Денис Домрачев
29 июня 2015

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

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

Евгений Соловьев
1 июля 2015

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


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

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

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

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

1




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

Как теория близости работает в интерфейсе? 2 Дизайнер — это булочник 3 Как влезать на профессиональную территорию коллег, чтобы они видели в этом пользу, а не угрозу? 1 Возникает разногласие с клиентом, но я не могу сказать клиенту «нет». Как быть? 3



© 2007—2016

Запрещённые слова
Пишите: artgorbunov@artgorbunov.ru