Шрифты, типографика в дизайне

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

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

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

В «Книге про буквы: от Аа до Яя» Юрий Гордон приводит свои определения графемы. В одном из них он сравнивает конструкцию графемы с архитектурным сооружением, которое имеет колонны, крышу и основание, в другом — со зверем, у которого есть тело, лапы и хвост.

Сравнение высоты (на рис.) строчных знаков у знаменитых шрифтов: Helvetica и Times New Roman. Визуальный размер шрифта определяется высотой строчного знака. Это значение меняется и отличается между шрифтами. У шрифтов с большей высотой строчного знака меньше выносные элементы. Например, на рис.А шрифты набраны одним кеглем, но высота строчных знаков в Helvetica больше, чем в Times New Roman. Это надо иметь в виду в случае, если вы подбираете подходящую пару выбранному шрифту. Ресурс Google Fonts поможет подобрать нужную пару по нескольким параметрам, и один их них будет высотой строчного знака.

Интервал между словами (на рисунке) равен строчной «i». Пробелы, больше, чем эта величина, ухудшают читабельность. Бытует мнение, что в русском языке слова длиннее, чем в английском, поэтому пробел между словами может быть шире. В Adobe Illustrator стандартный пробел равен величине «i».

Не делайте слишком большую или короткую длину строк. Знайте, что 40-80 — оптимальное количество знаков в дизайне. Помните, что бывают исключения и не надо слепо следовать правилам. Простой способ вычислить длину строки — это метод Роберта Брингхёрста (Robert Bringhurst), который умножает размер шрифта на 30. Если величина кегля 10 px, умножая его на 30, получим 300 px или, приблизительно, 65 символов в строке.

Хороший баланс между «воздухом» и цветом текста может зависеть от межстрочного расстояния. Можно рассчитывать интерлиньяж с помощью простой формулы «полтора». Для начинающих будет несложно запомнить правило.

Размер текста 16 пт, интерлиньяж — 24 px. 16 / 2 = 8 + 16 = 24.

Исключение: это правило хорошо работает в веб-дизайне. Делать верстку книги по этому правилу — не самая хорошая идея.

Возможно, эти два слова в типографики путают чаще всего: шрифт (font) и гарнитура (typeface).

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

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

Количество степеней насыщенности может быть очень большим, как у Univers от Linotype, а их названия могут варьироваться. Многим шрифтам присущи три общих стиля: курсив, наклонный шрифт и капитель.

Не все шрифты имеют курсив. Например, начертание Univers 45 Light Oblique на рис. Г не курсивный, а наклонный шрифт.

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

Благодаря весу вы можете управлять акцентами. Не так просто сбалансировать стили шрифта. Чтобы было проще, сфокусируйтесь на содержании текста или смысле. Определите характер и голос сообщения. Иногда смысл проще выразить нейтральным голосом.

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

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

Масштаб создает последовательность в размерах элементов. Визуальная шкала типов превращает типографский баланс в заданное соотношение. Масштаб шрифтов играет очень важную роль. О нём нужно помнить и соблюдать правила. Например, заголовки должны быть больше, чем текст в разделе, заголовок H1 должен быть больше H2 и т.д. Самый крупный текст должен быть в теге H1, а самый маленький — в H4-H6.
Помните, что размеры не должны сильно отличаться друг от друга.

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

Когда вы пытаетесь выбрать нужную вам гарнитуру, перед вами стоит нелегкий выбор. Один из вариантов (см. рисунок) — упростить классификацию шрифтов относительно их роли в дизайне. Выделим 3 большие группы:

Согласно ATypI (Международной ассоциации типографов) в группу каллиграфических шрифтов входят: рукописные шрифты (Script), глиптальные шрифты (Glyptal types), акцидентные (display), готическое письмо (Blackletter) и гэльский шрифт (Gaelic).

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

Имеют общий отличительный признак — засечки. Засечки — короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака.
Антиквы старого и современного стиля: венецианская, итальяно-французская, барочная, романтическая, брусковая.

Характеризуются малой контрастностью или полным отсутствием визуального контраста между основными и соединительными штрихами. Форма овалов, степень открытости знаков и разноширинность — отличительные признаки, по которым гротески условно делятся на старые, новые, геометрические и гуманистические.
Первые гротески появились сравнительно недавно, в XIX веке в Англии. Для шрифта характерна простая и геометрическая форма.

Это декоративные, художественные шрифты. Они менее разборчивы, поэтому не используются для основного текста, но привлекают внимание. Акцидентный шрифт больше всего подходит для заголовка. Могут быть формальными и неформальными, также включают в себя готические гарнитуры.
Для декоративных шрифтов также целью является привлечение внимания. Делятся на новые и старые, на русской и латинской основе.
Рукописные шрифты имитируют почерк. Благодаря контуру они кажутся лёгкими при любых размерах. Рукописные шрифты делят на формальные и неформальные. Впервые они появились примерно в XVIII веке.

Helvetica — швейцарский нож в графическом дизайне. Он входит в группу новых гротесков для универсального использования. Хорошо смотрится на плакатах, в книжном наборе и в цифровой среде. Brush-up и Heroe — яркие примеры декоративных шрифтов. Им нашли применение в буквицах и заголовках при оформлении глянцевых журналов.

Давайте рассмотри возможности типографики поближе. Начнём с одного из острых вопросов — сочетание гарнитуры и фирменного знака в фирменном стиле.

Сочетание шрифтов, вероятно, одна из самых интересных и сложных задачек в типографии. Там нет определенных правил и это делает процесс интересным. Конечно, есть рекомендации. Чтобы получить захватывающий вариант, от вас потребуется знание шрифтов, творческая смекалка и терпение. Результат превзойдет ваши ожидания, а время, которое вы потратите окупится во сто крат.

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

Русская типографика сравнительно молодая, если сравнивать её с европейской. Основы терминологии заложили Владимир Кричевский и Владимир Ефимов. В этом уроке мы следуем терминам Ефимова, потому что она ближе к современным понятиям и созвучна с компьютерным терминам в графических приложениях. Для тех, кто ищет отличия в терминологии русской типографики, рекомендую читать книги Владимира Кричевского «Типографика в терминах и образах» и Юрия Гордона «Книга про буквы: от Аа до Яя».

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