Кернинг, отслеживание и ведение: простое руководство по эффективному шрифту

При разработке для Интернета вы всегда должны помнить об одном: удобочитаемость. Неважно, насколько хорош дизайн, насколько великолепен ваш макет или насколько гениально вы используете цвет. Если люди не могут читать слова на экране (и это, конечно, при условии, что на экране есть слова), веб-сайт не может выполнять свои функции. Три наиболее важных элемента читабельности текста - это кернинг, отслеживание и интерлиньяж, хотя многие люди либо путают их, либо просто не понимают, как их эффективно использовать. Мы намерены исправить это сегодня.

Кернинг, отслеживание и ведение

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

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

Настройка кернинга, интерлиньяжа и трекинга (и многого другого!)

На самом деле, прежде чем мы углубимся в подробности, давайте рассмотрим, как вы меняете и настраиваете эти настройки. Хотя в большинстве текстовых редакторов есть опции для их настройки, большинству людей это никогда не понадобится при написании копии или обычного текста. Это когда вы разрабатываете текст , который становится все более важной проблемой, поэтому программы , как Photoshop, Illustrator и т.д. будут иметь параметры , которые нужно больше всего.

В продуктах Adobe вам просто нужно открыть панель символов текстового слоя, и у вас есть все необходимое. V / A - это кернинг, VA в квадрате отслеживает, а подчеркнутые вертикальные A - ведущие. Вы также можете настроить зачеркивание, вес, размер, надстрочный / подстрочный индекс и многое другое на этой панели. Стоит привыкнуть, чтобы это оставалось открытым.

Просто поместите курсор в то место, где вам нужно отрегулировать интервал, и вперед.

Что такое кернинг?

Начнем с кернинга . Кернинг на самом деле самый простой из трех. Это пространство между двумя соседними символами. Одним словом, у вас может быть переменный кернинг, потому что расстояние между первыми двумя буквами может быть другим, чем между двумя последними (и так далее).

В моноширинных шрифтах каждый символ занимает одинаковое количество горизонтального пространства без перекрытия. У A такой же ширины, как у B, и у J, и у K. Регулировка кернинга между этими буквами, как правило, проще, чем шрифты с переменным интервалом, где буквы могут перекрываться, а также печататься с разной шириной.

В приведенном выше примере у нас есть три строки, которые были скопированы и вставлены с использованием моноширинного шрифта Courier New . Кернинг верхней строки установлен на 0, который является значением по умолчанию и использует любой интервал, выбранный дизайнером шрифтов. Во второй строке между буквами (и пробелами) установлено равное 200. Как видите, пробелы одинаковы между символами в строке. Наконец, третья строка была произвольно выделена как с положительным, так и с отрицательным интервалом в каждом отдельном слове. Как видите, у каждого символа может быть свой кернинг с каждой стороны.

Что такое отслеживание?

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

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

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

Рукописные шрифты и курсивные шрифты устанавливаются с определенным кернингом, и если вы настроите отслеживание, вы получите пробелы в непрерывной строке. Или пойти в другом направлении, чтобы сжать строки, вы можете просто сделать скрипт нечитаемым.

Что такое ведущее?

С ведением вы больше не имеете дело с интервалом между символами. Интерлиньяж - это расстояние между строками.

Эффективное использование интерлиньяжа позволяет эффективно использовать пробелы в ваших проектах. Тесные линии - даже при правильном и хорошо выполненном кернинге / трекинге - могут доставить неудобства читателям.

В некоторых местах вы можете увидеть интерлиньяж, называемый высотой строки , но это примерно одно и то же. Одно хорошее практическое правило - убедитесь, что вы оставляете хотя бы немного места над и под персонажами. Как вы можете видеть в верхнем примере, шрифт 40 пикселей имеет высоту строки 48 пикселей. Это означает, что несмотря ни на что, между буквами будет промежуток. Если вы установите это значение или меньше, чем размер шрифта, вы получите перекрытие символов.

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

Однако, как вы можете видеть, параметры под кернингом / трекингом на панели символов Photoshop регулируют ширину / высоту символов независимо от кернинга, трекинга и интерлиньяжа.

Сочетания клавиш в Photoshop / Illustrator

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

Эти ярлыки предназначены для пакета Adobe Creative Cloud, поэтому они могут отличаться в Gimp, Paint.NET или другой программе.

• Кернинг - установите курсор между двумя символами, удерживайте ALT (или Option на Mac) и используйте стрелки влево / вправо для настройки кернинга.
• Отслеживание - выделив слово / строку, удерживайте ALT (или Option на Mac) и используйте стрелки вправо / влево, чтобы настроить отслеживание выделенного текста.
• Ведущий - выделите линии, которые вы хотите настроить, удерживайте ALT (или Option на Mac) и используйте стрелки вверх / вниз, чтобы отрегулировать расстояние между линиями.

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

(Кстати, если вы не пользуетесь сочетаниями клавиш Photoshop / Illustrator / Premier и т. Д. Регулярно, мы настоятельно рекомендуем изучить их, так как это сделает ваш рабочий процесс намного более плавным, приятным и продуктивным.)

Заключение

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

Каковы ваши советы и рекомендации по получению идеального трекинга, кернинга или интерлиньяжа в дизайне?

Статья от имени BarsRsind / shutterstock.com