I like to move it, move it! (о кернинге, как о необходимой процедуре дизайна)
I like to move it, move it! (о кернинге, как о необходимой процедуре дизайна)
источник: неизвестно автор: Кицен Андрей
Сейчас
на просторах рунета можно найти несметное количество сайтов, авторы
которых (зачастую фактически копируя друг друга) публикуют статьи о
веб-дизайне. На самом деле, действительно ценного в этих трудах
немного. Как правило, в них описываются очевидные вещи, которые для
человека, имеющего мало-мальские способности делать дизайн (а не просто
говорить о том, что он знает Photoshop™ или CorelDRAW™, а потому
необычайно крут) понятны и без прочтения этих статей. Здесь оговорюсь -
я не считаю, что все, что посвящено сетевому дизайну - ерунда. Кому
надо, дам адреса, их немного. Но сейчас я хочу написать о процедуре,
без которой, на мой взгляд, невозможен профессиональный дизайн, и о
которой лично я ни одной статьи в сети не встречал (может потому, что
целенаправленно и не искал).
Эта процедура называется кернингом (kerning). Наверное, многие,
особенно те, кто работает в графических или издательских пакетах,
знают, что такое трекинг (tracking) - это величина отступа между
символами в слове. Но на самом деле все то, что делается автоматически,
не всегда идеально с точки зрения человеческого зрения (каламбур :-).
Кернинг - это процесс регулировки межбуквенного расстояния в
зависимости от конкретного сочетания символов. Взгляните на этот пример
(две "почти" одинаково набранные фразы):
Если Вы не видите никакой разницы - извините, эта статья не для Вас, и
дальнейшее ее прочтение никакой пользы не принесет. Спасибо тем, кто
остался :-)
Некоторые не понимают с первого взгляда, какая разница между этими
двумя примерами, но подсознательно чувствуют, что вторая картинка
лучше. Все дело здесь в оптической иллюзии. На первой Вы видите текст,
просто набранный в Photoshop-е, на второй - тот же текст, но после
регулировки "вручную".
Представим себе два квадрата, расположенные на некотором расстоянии
друг от друга, такой же квадрат и круг, и просто два круга - с тем же
промежутком между ними.
Что мы видим? Два квадрата тесно прижались, круг от квадрата
(почему-то) отдаляется, а два круга вообще - почти что рядом не стояли.
Нет, проблема не с монитором. Просто образуются "визуальные дыры" -
назовем их так. Все дело в формах наших фигур. Так как стороны
квадратов прямые, то и расстояние между ними неизменно на всем их
протяжении. С кругами же все наоборот - расстояние между
соответствующими точками их сторон постоянно изменяется и заданное
расстояние, равное промежутку между квадратами на первом рисунке,
остается только между ближайшими точками. Таким образом и получается
"дыра" - иллюзия незаполненности пространства между фигурами.
Точно так же ведут себя и буквы, форма которых порой куда более
изощренная, нежели просто круг или квадрат. И чем больше размер шрифта,
тем сильнее заметен "разброд".
Вот тут-то и нужно применить все умение дизайнера увидеть недостатки
автоматического трекинга, а так же терпение, которое очень понадобится,
чтобы эти недостатки исправить. Особенно важен кернинг для надписей,
сделанных большим кеглем - как правило это заголовки, логотипы (тут
вообще кернинг - святое дело), баннеры (да-да!). Кроме того, большой
кегль - это сильнейший акцент в композиции, надписи, набранные им,
сразу привлекают взгляд и этому взгляду должно быть комфортно.
Потрудитесь обеспечить это. В мелких же надписях порой никакая
регулировка не поможет (особенно, если работать с экранным разрешением
в 72dpi) - Вы просто не сможете сдвинуть символ на нужное расстояние,
однако, если дыра большая, зачастую это удается.
Рубленные шрифты регулировать легче, нежели шрифты с засечками (а уж
тем более декоративные), так как их форма гораздо проще и более
приближена к простым геометрическим фигурам. Рубленные шрифты хорошо
смотрятся с небольшим интервалом (особенно жирные типа
FreeSetExtraBold, ArialBlack или Impact), тогда как символы из шрифтов
с засечками не всегда можно сдвинуть так, чтобы засечки не наложились
друг на друга - это никуда не годится. Изредка можно допустить лишь
слияние, но не наложение засечек. Но всегда надо пытаться "латать дыры"
(либо наоборот - исправлять излишнюю тесноту символов).
Многие любят готовые рецепты типа "пять-шесть правил Профессионального
Дизайна" или "Как сделать за 3 минуты красивое меню". Не дождетесь. Нет
никаких четких правил, по которым нужно сдвигать или раздвигать символы
на столько-то-и-столько-то в зависимости от их сочетаний - нужно просто
смотреть на то, что в результате получается. Я бы порекомендовал
сначала выбрать наиболее проблемное сочетание (скажем ЖЭ, ГХ, ОС, КУ,
LJ и т.д. - в разных гарнитурах по-разному) и сперва отрегулировать
его. Затем браться за символы, расположенные в непосредственной
близости справа и слева - и так постепенно расходиться в обе стороны,
наблюдая за тем, что получается вцелом. Если Вы считаете, что сдвиг на
один пиксель - это уже много, и "дыра" в Вашей надписи превращается в
"тесноту" - попробуйте сделать следующее. В диалоговом окне
форматирования текста в графическом редакторе выделите первый символ
проблемного сочетания и установите для него такую величину трекинга,
чтобы в результате действия anti-aliasing-а получилось такое
расстояние, которое Вас устроит. Возможно, придется иногда возвращаться
к некоторым символам, что поделаешь. А еще очень полезно после того,
как уже "все готово", погулять пару часиков и снова взглянуть свежим
глазом на свое творение - Вы сразу увидите то, что увидит посетитель
Вашего сайта в первый момент, включая и неточности. Садитесь и
исправляйте!
P.S. Не удивлюсь, если больше половины прочитавших эту статью скажут:
"Да ну, ерунда какая, зачем тратить свое драгоценное время на какие-то
мелкие тусовки пикселей, лучше в Quake..." Наверняка эти люди
"занимаются дизайном" в свободное от
школы/танцев/прогулок-с-друзьями/и-т.д. время. Это любители, им скоро
надоест. Моя статья для тех, кто действительно хочет, чтобы их творение
смотрелось хорошо, и никогда не скажет, что он уже Все Знает Про
Настоящий Дизайн. Настоящий дизайн не делается за 5 минут, поверьте...