Блок 5/0.
Введение в типографику

Типографика — это элемент хорошего дизайна. Она окрашивает слова в нашем языке и придаёт им смысл.

Согласно Википедии, типографика является одной из отраслей графического дизайна и представляет собой свод правил верстки печатного текста.

Рисунок. От наскальной живописи в пещере Ласко до Финикийского алфавита

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

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

Подробнее о том, как рисунки стали буквами.

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

Утверждение «Человек не может не общаться» известно как первая аксиома коммуникации по Вацлавику (из книги Эрика Шрикермана «О шрифте»). В этой же книги автор рассказывает историю о том, как его приятель посетил Японию и был необычайно расстроен тем фактом...

Подробнее о том, что расстроило приятеля в Японии.

«Человек не может не общаться» — Поль Вацлавик

Типографика — это элемент хорошего дизайна. Она окрашивает слова в нашем языке и придаёт им смысл.

Согласно Википедии, типографика является одной из отраслей графического дизайна и представляет собой свод правил верстки печатного текста.

Как правило, типографику связывают с оформлением книги и созданием шрифта.Так сложилось исторически. В 1929 году Стенли Морисон дал определение типографики, ставшее классическим: «…искусство подобающего расположения наборного материала сообразно конкретному назначению».

Стенли Морисон и Роберт Брингхёрст определяли типографику как искусство, Ян Чихольд утверждал, что типографика — это больше наука, чем искусство. Эмиль Рудер определяет типографику как вид графического дизайна.

С лёгкой руки Максима Жукова на русском языке в 90-х годах появилась книга Эмиля Рудера «Типографика». В послесловии к книге Жуков пишет о том, что Рудер своим видением дополнил и расширил старые определения типографики, которые можно было найти в классических энциклопедиях. В трактовке Рудера, типографика — «это вид изобразительного искусства, род тиражной графики, чей художественный язык строится на применении типографского наборного материала: шрифта, украшения, линеек и т.п.» — пишет Максим Жуков.

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

«Типографика — …искусство подобающего расположения наборного материала сообразно конкретному назначению». — Стенли Морисон

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

Относитесь к выбору шрифта очень серьезно. Раньше шрифты создавались, чтобы решать проблемы при печати. Во времена печатного пресса и переноса краски с свинцовой буквы на бумагу, создатели шрифтов думали о износе буквы и затекании краски, поэтому на свет появился такие гарнитуры как Hermes и Block. Мягкие контуры и низкий контраст букв скрывали износ при печати и позволяли получить бОльшее количество оттисков.
Сегодня мы получаем информацию на дисплее Retina, поэтому современный вид шрифтов определяется эстетическими предпочтениями дизайнера.

На рисунке показана гарнитура IBM Plex Serif из 4 шрифтов.

Возможно, эти два слова в типографики путают чаще всего: шрифт (font) и гарнитура (typeface). Шрифт (font) — это графически упорядоченное изображение знаков системы письма: букв, цифр, символов, знаков препинания и т. д. Например, шрифт IBM Plex Serif на macOs выглядит как «IBMPlexSans-Bold.ttf», а семейство — это целая папка с шрифтами в одном стиле.

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

Высота строчного знака определяет визуальный размер букв. Например высота строчных знаков у буквы «Х» Helvetica выше высоты Times New Roman. Размер шрифтов одинаков.

Вверху сравнение высот строчных знаков у знаменитых шрифтов: Helvetica и Times New Roman. Визуальный размер шрифта определяется высотой строчного знака.

Это значение меняется и отличается между шрифтами. У шрифтов с бОльшей высотой строчного знака меньше выносные элементы. Например, на рисунке шрифты набраны одним кеглем, но высота строчных знаков в Helvetica больше, чем в Times New Roman.

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

Слева. Кегль шрифта (point size) определяется одинаково как в металлическом, так и в цифровом наборе. Прямоугольники с серых штрихом — кегельные площадки металлических литер или цифрового шрифта.
Справа. Скриншот из графического редактора Adobe Illustrator. Синяя линия указывает на размер шрифта в пунктах.

Кегль (см. рисунок) — высота строчных букв + верхние и нижние выносные элементы + небольшое расстояние по краям. Ранее каждая буква отливалась самостоятельным блоком. Площадка, на которой располагалась буква, была немного больше, чем сама буква. Отступы по краям площадки не давали соприкасаться с другими буквами. В современном, цифровом варианте шрифта кегль остался равен высоте площадки.

В примерах вверху: А — отрицательный, Б — нормальный, В — положительный трекинг. Слишком большой или маленький интервал выглядит неуместно и может затруднять чтение. Это не относится к специальным визуальным приёмам в графическом дизайне. Внизу на рисунке пример пробела в шрифтах IBM Plex Serif Regular и PT Sans Regular.

Трекинг — (от англ. tracking) — пропорциональное изменение расстояния между буквами (межбуквенных пробелов).
В отличие от кернинга, который регулирует расстояние между знаками в определенных парах («AV», «TA» и пр.), трекинг применяется к группе символов (слово, строка, абзац и т. д.).
Увеличение трекинга (разрядка) делает набор более разрежённым, светлым; уменьшение — более плотным и тёмным.

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

Больше информации «Анатомия шрифта» в полном курсе

Гарнитуры Gotham Pro и Merriweather хорошо сочетаются, потому что у них очень близкие высоты строчных знаков.

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

Некоторые шрифты в супер семействах шрифтов выпускаются с засечками и без засечек. Объединяйте, вы точно не ошибетесь.

Использовать шрифты из супер семейств — ещё один способ найти гармоничное сочетание двух и нескольких шрифтов для проекта. Некоторые гарнитуры разрабатываются большой шрифтовой группой, но могут быть с засечками и без. Примеры таких семейств Roboto и Roboto Slab, PT Sans и PT Serif, IBM Plex Sans и IBM Plex Serif.

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

Подробнее «Как правильно подбирать шрифты?» в полном курсе

Иллюстрация «Оптические иллюзии» из книги «Типографика» графического дизайнера Эмиля Рудера

А—геометрически точный квадрат кажется ниже по высоте. B — при точном разделении нижняя часть кажется меньше по высоте. С — вертикальная линейка зрительно становится тоньше. D — горизонтальные линии зрительно удлиняют квадрат в высоту. E — вертикальные линии расширяют квадрат. F— черный квадрат при уменьшении выглядит как круглая точка. G—белый квадрат на черном выглядит крупнее своего брата на белом. рис H. K— геометрически точный круг кажется вытянутым в ширину

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

Подробнее про «Оптические иллюзии в шрифтах» в полном курсе

1. Антиквы (шрифты с засечками)

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

2. Гротески (рубленные)

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

Подробнее про «Классификация шрифтов» в полном курсе

Два клика — образовательный онлайн-курс по графическому дизайну. Содержит проверочные тесты, профессиональный словарь терминов и интерактивные примеры. Предназначен для дизайнеров, менеджеров, маркетологов и предпринимателей.

Блок 5/1.
Далее — использование шрифтов в дизайне

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

© Copyright, {{current_year}}, {{ec_es_email_sender_company}} • {{ec_es_email_sender_address}}

Вы получили данную рассылку, так как являетесь клиентом или подписчиком {{ec_es_email_sender_company}}. Отказаться от рассылки