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