Кернинг примеры. Правильная типографика: кернинг (Kerning)

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

Обучение эффективному кернингу – это, прежде всего, тренировка наблюдательности и внимания к деталям.

И всё-таки, что означает это понятие?

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

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

Когда межбуквенный интервал шрифта не определён, каждый последующий символ располагается рядом с предыдущим, начинаясь строго в его конечной точке. Это наглядно видно на верхнем изображении со словом “AWE.” Между буквами A и W осталось много незаполненного пространства, тогда как W и E практически прилипли друг к другу. В результате текст выглядит неряшливо и вводит читателя в заблуждение: так всё-таки “A WE” или “AWE”?

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

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

В этом случае оптимальный межбуквенный интервал вычисляется на основе информации о контуре каждой отдельной буквы.

Разрабатывая дизайн гарнитуры шрифта, хочется иметь возможность полностью контролировать то, каким образом буквы будут размещаться друг за другом при наборе. В таком случае кернинг нужно устанавливать вручную. Обратите внимание: буквы A и W сдвинуты ближе друг к другу, чтобы устранить незаполненное пространство, образовавшееся двумя диагональными линиями при автоматическом кернинге.

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

Учитесь правильно кернить текст!

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

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

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

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

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

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

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

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

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

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

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

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

Для новичков напомню: чтобы изменить кернинг пары, не нужно выделять букву, достаточно поставить перед ней курсор и двигать букву сочетанием Alt+влево/Alt+вправо.

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

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

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

Если вы занимаетесь Web-дизайном, но вам еще есть куда совершенствоваться, то, возможно, вам будет интересна наша небольшая статья о типографике. При разработке дизайна сайта необходимо четко понимать, как работать с текстом, а именно с межстрочным расстоянием, межсимвольным расстоянием, да и вообще, как выбрать шрифт. В этой статье мы постараемся внести ясность в такие аспекты веб-типографики, как интерлиньяж и кернинг. Мы научимся тому, как и когда их применять.

Для начала, откроем панель "Character" в фотошопе. Там находятся нужные вам настройки текста. Если не можете найти эту панель в рабочем пространстве, то откройте через Window-Character.

Leading (Интерлиньяж)

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

Стандартной пропорцией интерлиньяжа считается 120%. То есть, если размер (size) шрифта 20 точек (pt), то интерлиньяж должен быть 24 точки (pt).

Сокращение интерлиньяжа до показателя ниже 120% создает слишком высокую "скученность" и плотность символов, а также создает риск столкновения элементов символов между собой.

Чтобы отрегулировать интерлиньяж в Photoshop, используйте соответствующее (Leading/Интерлиньяж в зависимости от языка интерфейса) поле в панели Character. Редактироваться будет интерлиньяж того слоя текста, который в данный момент выделен.

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

Кёрнинг

Кёрнинг - говоря по-простому - расстояние между двумя символами. Целью кернинга является создание гармоничного пространства в рамках группы символов, и, в некоторых случаях, намеренное сильное увеличение/уменьшение этого пространства в целях придания тексту какого-то особого внешнего вида. Почти все шрифты, которые вы используете, уже включают в себя определенные прописанные расстояния между комбинациями символов, называется это Metric Kerning. Следует отметить, что если увеличить размер шрифта, или, например, изменить интерлиньяж текста, то Metric Kerning может ответить на эти изменения не совсем корректно. Если выставлен параметр Optical Kerning, фотошоп (или другая программа, которую вы используете) будет применять кернинг автоматически. Но, как ни странно, большинство дизайнеров не находят эту функцию полезной. Самым предпочтительным остается Manual Kerning.

Что такое manual kerning? По сути - это Кёрнинг вручную. Представьте себе, что расстояние между символами заполнено некой жидкостью, и такое же количество жидкости должно четко вмещаться между всеми расстояниями. Вы регулируете расстояние между символами на глаз, но если глаз отточен, то это - лучший прием.

Кернинг может быть вручную отрегулирован в панели Character в Фотошопе. Перед этим выставьте курсор между символами, расстояние между которыми собираетесь регулировать. Есть способ побыстрее. Также выставьте курсор между этими двумя символами, а затем, зажав клавишу Option, нажимайте стрелки влево/вправо. Результат будет нагляден.

Вот несколько вещей, которые нужно помнить о кернинге

1. Начинайте с самых сложных сочетаний символов. Например, кернинг между заглавными и строчными буквами.
2. Оставьте регулирование кернинга на конец работы над дизайном. Пусть это будет одним из последним шагов. Работайте над ним тогда, когда уже на 100% будете уверены в выбранных шрифтах, чтобы не потратить время зря.
3. Цель кернинга - сделать текст оптически-корректным. Тут нет никакой математической формулы, канонов и прочего. Просто практикуйтесь, и все начнет получаться. Иногда играйте в эту игру - Type.method.ac

Ке́рнинг (англ. kerning) при наборе текста - избирательное изменение интервала между буквами в зависимости от их формы.

Проще говоря, кернинг — процесс правильного размещения символов, регулируя расстояния между ними, в результате которого должна быть достигнута гармония. Хотя на кернинг многие особого внимания не обращают (да и вообще — не знают), однако внимание в мелочам помогает достичь очень хороших результатов.

1) Трекинг(Tracking) и кернинг(Kerning) — два понятия, которые не стоит путать. Трекинг — обозначает расстояние между символами в слове или предложении, независимо от их формы и размера. А вот кернинг — это более «местное» понятие.

2) Каждый файл шрифтов имеет внутреннюю таблицу кернинга. Дизайнер настраивает расстояния между парами строк, определяя их в тысячных долях. Например, VA имеет кернинг -80, а ry — 30.

3) в Photoshop, InDesign и Illustrator есть функция optical-кенинга, когда отображается альтернативный вариант. Хотя разницы почти никакой.

4) Заглавные T, V, W и Y всегда проблематичны. Так как у них верхняя часть шире нижней. Так что используйте Tracking, чтобы вручную подравнять слова.

5) Есть такой приём — представьте, что между буквами расположены одинаковые по объему шары, наполненные воздухом. Наша цель — чтобы эти шары никуда не расползались, а были надёжно закреплены между буквами

6) Одна из самых распространённых ошибок кроется в единице) Этот символ — узкий и образует вокруг себя много пустого пространства. По этой причине кернинг нуждается в доработке.

7) Цифра 7 — ещё один проблемный символ. На него тоже следует обратить внимание.

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

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

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

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

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