Почти в каждом объявлении о поиске графического дизайнера теперь можно встретить формулировку вроде «знание типографики обязательно». Логичный вопрос: что именно под этим словом имеют в виду?

Интуитивно понятно, что речь идёт о работе с буквами, шрифтами и текстом. Но на этом понимание у большинства не-дизайнеров, да и у части дизайнеров, заканчивается. Исключение — выпускники сильных художественных вузов и специализированных шрифтовых курсов.

Людей с действительно глубоким пониманием шрифта немного, а те, кто сознательно специализируется на типографике, часто воспринимаются почти как отдельная профессия. Поэтому давайте спокойно и последовательно разберёмся, что такое typography (типографика).

Откуда взялось слово typography

Слово typography (типографика) состоит из двух частей.

typo — от латинского typus («знак, эмблема») и греческого τύπος (typos — «вмятина, отпечаток, рельеф»);
-graphy — от греческого γραφία (graphia — «письмо, запись»).

В буквальном смысле это «искусство писать знаки и создавать отпечатки». Это хорошо совпадает с историей: типографика возникла и развивалась вместе с печатью.

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

В традиционном процессе такие литеры набирали (typesetting — набор) в строки и полосы, покрывали краской и под давлением прижимали к бумаге, получая отпечаток. В этой базовой схеме мало что менялось примерно четыре столетия.

Этим занимались наборщики (typesetters — наборщики): они вручную складывали текст в верстатки и на наборные планки. Только когда набор был завершён, типография могла приступать к печати.

Крупный план металлических литер старого шрифта Garamond — отдельные свинцовые «палочки» с вырезанными знаками, среди них лигатура с длинной ſ и i. Источник: Wikimedia

Со временем разделились роли:

typesetters (наборщики) занимались компоновкой текста, но не его формой;
в лучших типографиях появлялись специалисты, которые подбирали или заказывали шрифты под конкретные издания;
сами шрифты проектировали type designers (шрифтовые дизайнеры) и вырезали punchcutters (резчики пуансонов).

Телега истории ехала вперёд: горячий металлический набор сменяли системы Linotype и Monotype, затем — фотонабор. Но общая логика разделения труда «кто придумывает, как текст должен выглядеть, и кто обеспечивает его физическую печать» долго оставалась неизменной.

Цифровой переворот

Чёрно-белая историческая фотография цеха наборщиков: несколько мужчин в рабочих фартуках стоят и сидят у больших стоек и верстаков, вручную набирая текст из металлических литер. Источник: Wikimedia

С появлением персональных компьютеров и систем Desktop Publishing (DTP, настольная издательская система) всё изменилось радикально. Даже на фоне предыдущих технологических сдвигов — вроде линотипов и фотонабора — цифра стала настоящим разломом в привычном устройстве печатного дела.

Наборщиков пересадили из цеха за компьютер, и они постепенно превратились в разновидность графических дизайнеров, а не только в рабочих типографии. Первые DTP-программы были примитивны, но по мере того как компании вроде Apple и Adobe проталкивали компьютеры в издательский бизнес, и техника, и софт становились всё мощнее.

Чтобы на экране можно было достоверно увидеть то, что получится на бумаге, цифровые шрифты уходили от пиксельных bitmap fonts (растровые шрифты) к шрифтам на основе математических кривых. Одно из ключевых решений этого периода в индустрии — создание формата OpenType (OpenType-шрифт), который до сих пор остаётся отраслевым стандартом.

Когда в повседневную жизнь вошёл интернет, появилось новое пространство для текста. Веб-страницы, как и книги или журналы, состоят из текста и изображений, поэтому шрифтовые дизайнеры и люди с типографическим мышлением очень быстро пришли в эту область. Так возникла отдельная дисциплина — web typography (веб-типографика): попытка навести порядок в том, как шрифты ведут себя на экране, с помощью CSS и JavaScript.

Рабочее определение типографики

Небольшой исторический экскурс помогает точнее сформулировать, что мы вообще называем typography (типографикой).

Существуют десятки определений. Одно из самых удачных даёт Cambridge Dictionary:

Typography: the design of the writing in a piece of printing or on a computer screen.

Если перевести буквально, получается: «Типографика — это дизайн письма в печатном изделии или на экране компьютера».

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

Вероятно точнее было бы заменить writing на text:

[…] the design of the text in a piece of printing or on a computer screen.

То есть:

Типографика — это дизайн текста в печатном издании или на экране.

Это определение гораздо лучше ложится и на историю, и на современную практику.

Чем типографика НЕ является

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

Если набрать в поиске «typography inspiration», вы почти наверняка увидите что-то вроде этого:

Практика каллиграфии: символы с завитушками и декоративными линиями. Источник: Wikimedia

Такая практика может быть прекрасным упражнением — но это не типографика, а другое ремесло. Есть как минимум две соседние области:

calligraphy (каллиграфия);
hand lettering (леттеринг, рисованная надпись).

Calligraphy (каллиграфия)

Calligraphy (каллиграфия, от греч. «писать красиво») — предшественница типографики. Она принципиально отличается от обычного письма и по форме, и по функциям. Каллиграфический текст должен выглядеть благородно и служит официальным целям: книги, мирные договоры, папские буллы, грамоты и прочие важные документы исторически писались руками профессиональных писцов.

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

Цели схожи: создать большой массив текста, который удобно читать и приятно рассматривать. Но ключевое различие — в инструментах:

каллиграф работает руками, перьями, кистями, перами;
типограф (в современном смысле) работает шрифтами в DTP-программах или системах набора.

В первом случае каждая буква единственна и создаётся в момент письма; во втором мы используем уже спроектированный typeface (гарнитуру шрифта) и инструменты набора. В примере выше мы видим как раз calligraphy, а не typography.

Hand lettering (или просто леттеринг)

Леттеринг — ремесло рисования буквенных композиций. С древних времён именно так делали вывески и надписи для торговли и ремёсел. До появления удобных способов печати крупного текста на стенах и фасадах это был стандартный способ «написать название».

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

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

Какие навыки входят в типографику

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

1. Выбор шрифта под задачу

Выбор typeface (гарнитуры шрифта) — одна из самых приятных и одновременно самых ответственных частей типографической работы. Удачный выбор может вытянуть даже скромный по бюджету проект; неудачный — убить очень дорогой.

Чтобы выбирать осмысленно, нужно честно ответить на несколько вопросов:

Какой характер нужен: современный, исторический, нейтральный?
Должен ли текст говорить громко или, наоборот, быть тихим проводником смысла?
Что именно вы делаете: сайт, книгу, логотип, интерфейс, всё сразу?
Нужна ли большая шрифтовая семья с разными weights (начертаниями по насыщенности) и styles (стилями), или хватит одного-двух?
Кто ваша аудитория, как и где она обычно читает?
Какие языки и символы должен уверенно покрывать шрифт: цифры, акценты, спецзнаки?

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

2. Понимание устройства шрифта

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

Минимальный набор терминов:

serif / sans serif (шрифт с засечками / без засечек);
contrast (контраст штрихов);
axis (ось штрихов);
x-height (икс-высота, высота строчных без выносных элементов);
ascenders и descenders (верхние и нижние выносные элементы).

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

Особенно в случае бесплатных шрифтов полезно критически смотреть на качество:

есть ли tapering (плавные сужения) в местах соединения штрихов;
есть ли overshoots (оптические выносы) у круглых и острых форм;
аккуратен ли kerning (кернинг, парные расстояния между буквами).

На самом деле можно удивиться количеством популярных шрифтов, в которых эти базовые вещи сделаны плохо. Например, шрифт ST-Nizhegorodsky от весьма неплохого дизайнера Александра Шиманова:

На скриншоте показан разбор символов Н О П шрифта ST-Nizhegorodsky и указание на проблемные моменты — отсутствие овершутов, компенсации очка в О, несогласованные толщины верхних перекладин и засечек.

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

3. Собственно шрифтовой дизайн

После того как вы немного разобрались в том, как шрифт устроен, возникает естественный соблазн: «А не нарисовать ли свой?»

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

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

4. Typesetting (набор и верстка)

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

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

Гораздо важнее общий набор принципов:

типографическая иерархия (что видно первым, что вторым, что можно прочитать «по диагонали»);
способы выравнивания и их последствия для читаемости;
связь между шириной колонки, leading (межстрочным интервалом) и комфортом чтения;
работа с пробелами, интервалами, отступами, «висячими» словами.

Для серьёзных текстовых проектов можно отдельно выделить классические DTP-программы: Adobe InDesign и Affinity. Это профессиональные программы, в которых удобнее всего собирать книги, журналы, многостраничные каталоги и аккуратные PDF-издания. Если ваша работа связана с версткой больших объёмов текста, освоить хотя бы одну из них — разумная инвестиция.

5. Веб-типографика

Текст на сайте или в приложении живёт по другим законам, чем текст в печатной полосе. Здесь нет привычной панели «Text», куда можно мышкой вбить число: всё управляется через код.

Поэтому веб-типографика гораздо ближе к фронтенд-разработке, чем к классическому плакатному дизайну. Дизайнер может нарисовать прекрасные макеты в Figma или Sketch, но превращать их в живой интерфейс будет человек, который одинаково держит в голове:

теорию набора и читаемости;
HTML, CSS, а иногда и JavaScript.

При этом речь не о «суперпрограммисте уровня бога». Базовые знания HTML и CSS уже позволяют осмысленно управлять шрифтами, интервалами, ритмом текста на странице.

Web typography — один из самых динамичных участков поля в общем понятии искусства типографики. Здесь постоянно появляются новые идеи, практики, паттерны; браузеры и движки потихоньку расширяют свои возможности. Вокруг темы существует живое профессиональное сообщество, поэтому фронтендерам и UI/UX-дизайнерам этот навык даёт большое преимущество.

Итог: что мы называем типографикой

После всех этих уточнений можно аккуратно подытожить:

typography (типографика) — это дизайн текста в печатной или экранной среде;
типографика не включает в себя каллиграфию (calligraphy) и рисованные надписи (hand lettering), хотя и соседствует с ними;
в практическом плане типографическая компетенция состоит из нескольких блоков: выбор шрифта, понимание его конструкции, при необходимости — type design, typesetting и web typography.

Сама статья — только отправная точка. Каждая из перечисленных областей может быть развёрнута в отдельный курс или даже книгу.

Что значит «знание типографики» в вакансиях

И, наконец, практический вопрос: когда в объявлении пишут «глубокое знание типографики» или «безупречный типографический вкус», что именно обычно имеется в виду?

Короткий ответ — это во многом зависит от компании, которая нанимает сотрудника, и от типа работы.

Если речь об устоявшемся агентстве с понятным профилем или о крупной компании, где команды разделены по задачам, и вы претендуете на senior-позицию, есть шанс, что авторы вакансии действительно понимают, что просят. Иногда они прямо перечисляют, какие навыки в области типографики им нужны. В таком случае от вас ждут, что вы принесёте в команду эту экспертизу и будете на неё опираться.
Если же это вакансия junior-уровня или объявление от небольшой, разношёрстной студии, формулировка «знание типографики» часто попадает в текст просто потому, что «так пишут везде». Слово выглядит профессионально, поэтому его вставляют по инерции.

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

Но давайте разберемся подробнее в терминологии типографики...

Что такое font и typeface и чем они отличаются?

Кратко: в русском языке ничем. И то и другое переводится как «шрифт». Однако, если читать профессиональную литературу или при общении с иностранными коллегами, корректно различать:

Font (шрифтовой файл) — это программное обеспечение или ПО, обычно содержащееся в виде файла шрифта (OTF, TTF, WOFF и т.п.).
Typeface (шрифт, гарнитура) — это дизайнерский замысел, стоящий за этим программным объектом.

Зачем вообще в этом разбираться?

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

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

Фрагмент гравюры с описанием конструкции литер C и D, вероятно авторства Луи Симонно (Charles Louis Simonneau, 1639/45—1728), Lawson A. Anatomy of a typeface. David R. Godine, publisher. Boston, 1990.

Давние времена

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

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

Type (литера, литер), или sort (литер, «буква» в наборе), — это небольшой металлический брусок из сплава свинца, олова и сурьмы. На одном его торце в зеркальном виде выступает glyph (глиф, знак) — буква, цифра, знак препинания и т.п.

Эта выступающая поверхность и есть «face» — лицо литеры, её рисунок. Отсюда и слово typeface — «лицо букв», то есть дизайн формы знака.

Процесс изготовления таких литер был долгим и по частям напоминает небольшой промышленный спектакль.

Как рождается металлическая литера

Рисунок.

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

Лист с чертежами исторического шрифта Romain du Roi: буквы построены на модульной сетке с координатами и измерениями, видно, как геометрия служит основой для изящной формы. Источник: гравюра Romain du Roi, см. Wikipedia

Пуансон.

Далее punch cutter (резчик пуансонов) переносит рисунок буквы на стальной брусок — punch (пуансон). Он вырезает глиф в стали вручную с невероятной точностью. Причём изображение на пуансоне — зеркальное по отношению к тому, что мы увидим на бумаге.
Матрица.

Готовый пуансон закаливают, а затем вдавливают в более мягкий металл, обычно медь, — получается matrix (матрица): углубление с зеркальным изображением глифа.
Отливка.

Матрицу вставляют в typecasting mold (форма для литья литер) и заливают внутрь расплавленный шрифтовой металл. После остывания литеру вынимают, обтачивают, шлифуют — и она готова к набору.

Фотография ручного устройства для литья литер: металлическая форма, в которую вставлена матрица. Так выглядят реальные инструменты исторической типографии. См. описание процесса на сайте музея

Небольшое отступление: весь этот процесс можно увидеть в живых подробностях в серии роликов на YouTube-канале Out of Sorts Film

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

Typeface (шрифт, гарнитура) — это именно дизайн буквенных форм, абстрактный замысел, который реализуется через множество конкретных литер, размеров, начертаний.

Где здесь появляется font

Font (фонт, комплект литер одного размера и начертания) появляется на самом конце цепочки.

Когда вы отливаете полный набор литер определённого дизайна и конкретного кегля — например, «12-пунктный Garamond Regular» — вот этот физический набор и называется font.

Futura Пауля Реннера как художественный замысел — это typeface (шрифт, гарнитура).
Futura 8 pt (набор литер данного рисунка в размере 8 пунктов) — это font (фонт).

Одна и та же гарнитура могла существовать в десятках вариантов: каждый кегль и каждое начертание — отдельный физический комплект литер.

Современность

Проблемы начинаются, когда в картину входят компьютеры. С появлением цифровой типографики мы перестали иметь дело с коробками литер и стали работать с font files (файлами шрифта) — OTF, TTF, WOFF и т.п.

При этом старый профессиональный жаргон никуда не делся: дизайнеры продолжали говорить про typeface (шрифт, гарнитуру), издатели и разработчики ПО — про font (шрифтовой файл). Дополнительно подлило масла в огонь то, что одно из самых известных приложений для разработки шрифтов называется FontLab — хотя в нём создают именно typefaces, а не «фонты» в старом металлическом смысле.

Формально, у слова typeface нет сегодня жёсткого «технического» определения в стандартах ПО. Тем не менее мы по-прежнему говорим о type designers (шрифтовых дизайнерах), а не о «font designers». Особенно полезно разделять эти термины, если вы занимаетесь исследованиями и читаете зарубежных авторов.

Из всего этого выросла привычная путаница:

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

Дополнительная сложность в том, что один и тот же шрифт как дизайн может включать много разных стилей (light, regular, bold, italic и т.д.) — и это надо как-то обозначать.

Если всё это собрать вместе, получается достаточно стройная система:

Шрифт (typeface) — дизайн буквенных форм.
Семейство шрифтов (type family) — группа стилей этого шрифта (Regular, Bold, Italic и т.п.).
Фонт (жаргонизм) — конкретное цифровое воплощение: файл с определённым стилем.

Пример:

Garamond Semibold Italic — это стиль шрифта в составе гарнитуры Garamond.
Garamond-SemiboldItalic.otf — это уже фонт, конкретный файл.

Файлы вроде Garamond-SemiboldItalic.otf и Garamond-Book.otf можно назвать одним шрифтовым семейством, если вам вообще нужно это словосочетание. Кстати, будьте осторожнее с термином font family (семейство шрифтовых файлов) в разговоре с иностранными коллегами — пользы от этого словосочетания мало, а путаницы много.

Если всё сильно упростить:

Typeface (шрифт, гарнитура) — форма: дизайнерская система очертаний букв.
Font (фонт, шрифтовой файл) — носитель этой формы: раньше — коробка металлических литер одного размера и начертания, теперь — файл .otf, .ttf, .woff и т.п.

В повседневной работе чаще всего достаточно говорить «шрифт» почти во всех случаях. Но:

когда речь идёт о дизайне и стилистике, уместнее говорить о шрифте (typeface);
когда обсуждаются файлы и установка, можно сознательно использовать жаргонное слово фонт.

Так вы и историческую точность сохраните, и коллегам будет понятно, что именно вы имеете в виду.

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

В следующих статьях мы поговорим о самых главных «базовых» правилах проектирования цифрового шрифта:

Вертикали и горизонтали.
Овершуты.
Толщины диагоналей.
Пересечения.
Соединения.
Большое/малое.
Инструменты для создания шрифта.

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

Что такое типографика: базовые понятия, навыки и примеры