Анатомия шрифта: как подбирать шрифтовую пару для проекта

Признавайтесь, дизайнеры: кто из вас тратил уйму времени на подбор шрифтов для проекта? Мы согласны, что определиться среди такого разнообразия действительно сложно… Чтобы не выбирать шрифты по субъективному мнению «нравится/не нравится», сегодня разберёмся, на какие элементы шрифта дизайнеру нужно обращать внимание и зачем — освоим анатомию шрифта как фундамент осознанного сочетания шрифтов!

В шрифтах нет случайных деталей

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

Засечка — элементы, которыми заканчиваются штрихи. Шрифты бывают с засечками и без. Эти засечки могут иметь разную форму, и по ним легко определить, к какой группе относится шрифт: пример классической антиквы, если засечки прямоугольные — перед вами брусковый шрифт, а если засечек нет вовсе — это гротеск.
Полуовал — встречается у букв Р, Б и других. Не путайте с петлёй, как у буквы «а». Петля больше напоминает «пузико, которое свешивается». Полуовал стоит прямо, и часть его обрезана штрихом.
Овал — внутреннее пространство округлых букв. В разных шрифтах овал разный.
Капля — это «наплыв» на концах штрихов. В разных шрифтах она встречается у букв «с», «а», «э» и других. Форма может быть любой, а иногда капля и вовсе превращается в засечку.
Штрих — несущая вертикальная черта у многих букв.
Перекладина — как правило, все горизонтальные линии, которые соединяют два штриха или пересекают основной. В кириллице нет примеров «пересекающих» перекладин, а в латинице такое можно наблюдать у строчной «f».
Соединительный штрих — разновидность перекладин. Встречается в кириллических «и», «й», а также в латинской N.
Выносной элемент — бывает подстрочным (буква p) и надстрочным (буква б), разной длины и формы. Это критически важная часть шрифта: она во многом определяет визуальное восприятие кегля. Когда вы в редакторе задаёте размер шрифта 10 пунктов — откуда и докуда считается это расстояние? На самом деле от нижней границы подстрочного элемента до верхней границы надстрочного, плюс пробельное пространство под нижним и над верхним выносными элементами (оно тоже входит в кегль).

Интересный факт: раньше кеглем называлась площадка, на которой располагалась металлическая литера в эпоху высокой печати. Буковка не всегда доходила до краёв этой площадки, оставляя пустое пространство. Это «пробельное» наследие до сих пор используется некоторыми шрифтовыми дизайнерами. Так что «размер шрифта 10 pt» может означать не только расстояние между выносными элементами, но и дополнительное пустое пространство.

Хвост — в кириллице у буквы «б» извилистая часть, уходящая вверх — это хвост. В латинице хвостом называют, например, нижний завиток буквы «g». Неоднозначных элементов очень много!
Наплыв — зона перехода от толстой линии к тонкой в шрифтах с неравномерными штрихами (разной толщины). При анализе шрифта смотрите на динамику наплывов: где-то они агрессивнее, резче, плавнее, скруглённее.
Свисающий элемент — особенность кириллицы. Есть в буквах «д», «ц», «щ».

Интересный факт о букве «д»: это одна из самых проблемных букв кириллицы. Её форма ещё не устоялась окончательно: существуют минимум две крупные группы — с перекладиной наверху и с треугольной верхней частью. «Д» может выглядеть как Л с нижней частью, равнобедренный треугольник, наклонный треугольник… А рукописный вариант порой и вовсе напоминает латинскую «g».

Акцент — надстрочный элемент различной формы. Самый очевидный пример — верхний элемент буквы «Й».
Высота строчных букв — расстояние между нижней и верхней точкой букв «т» и «п». Круглые буквы исключены, так как в них есть «свисание»: они не лежат на строке, а немного провисают (взгляните на букву «с»).
Концевой элемент — маленький хвостик в месте, где наплыв должен был бы перейти в засечку, но для засечки нет места. Например, из-за «петли» в букве «а» её концевой элемент остаётся крохотным хвостиком, не становясь полноценной засечкой.

Цвет шрифта и вес

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

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

Вес шрифта — родственное понятие, это про то, насколько «тяжело» выглядит шрифт. На вес влияют три фактора:

1. x-height (высота строчных)

У нас есть две базовые высоты — прописных букв (это не кегль, он гораздо больше) и строчных букв. Прописные обычно стоят на базовой линии. Соотношение высоты строчной к прописной колеблется в широком диапазоне: от 55% до 80% (если прописную принять за 100%).

Капитель — это начертание, где все буквы прописные, но разница в росте между прописной и «строчной» сохраняется. В английском это называется small caps и часто заложено прямо в шрифт. Если капитель не заложена в файл шрифта, её можно искусственно создать в InDesign — вы набираете текст прописными, оставляя первую букву высокой, а остальные уменьшаются до капители. По умолчанию InDesign задаёт им размер около 70% от роста прописной, но это значение можно менять.

Вернёмся к нашим текстам Merriweather и Georgia. Высота строчных у Merriweather заметно выше, чем у Georgia, поэтому первый текст кажется крупнее, хотя технически оба набраны 16 кеглем. Отсюда правило: подбирая шрифтовую пару, обязательно сравнивайте x-height — он должен быть либо одинаковым, либо очень близким. Этот параметр напрямую влияет на удобочитаемость, настроение и визуальную плотность набора.

2. Контраст

Сравним Merriweather и Bodoni. И там, и там есть разница между толстыми и тонкими штрихами, но они из разных групп: Merriweather — брусковый, Bodoni — новая антиква с подчёркнутым контрастом. Чем сильнее разница в толщине штрихов, тем контрастнее шрифт.

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

3. Светлота (weight) шрифта

Третий фактор — светлота, или начертание. Шрифты внутри одной шрифтовой гарнитуры (например, Myriad Pro Regular и Myriad Pro Bold) остаются разными шрифтами, потому что различаются по весу, начертанию и ширине символов.

Самые распространённые начертания: жирное (bold), полужирное (semibold), обычное (regular), тонкое/светлое (light) и очень тонкое/светлое (ultra-light). В них меняется соотношение пробельных и печатных элементов. Посмотрите на букву «e»: в Myriad Pro Regular полуовал довольно крупный относительно штриха, а в Bold он заметно меньше.

Засечки

Каких только засечек не бывает! С плавными переходами от штриха к острию — это антиквы. С закруглениями, прямыми углами и «брусковыми» окончаниями. У моноширинных шрифтов — очень длинные засечки, чтобы уравнять ширину всех знаков: благодаря им «1» и «ш» занимают одинаковое пространство. Есть и переходные формы: шрифты, которые почти превратились в гротеск, но сохранили небольшое утолщение на концах штрихов.

Капля

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

Самый правый вариант «а» — капля антиквы, почти круг. Антиквы вообще выросли из письма ширококонечным пером, и такая «капля» рождалась движением пера с чернилами. Средний вариант — промежуточный: углы скруглены, но круглой формы нет.

И помните: капли могут быть на концах самых разных букв, не только у «а».

Ноги и руки

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

Стыки

Там, где «руки» и «ноги» соединяются, появляется стык. У него есть и другие названия — колено, ветка. На изображении мы видим, насколько разными могут быть стыки в четырёх шрифтах. У Helvetica нога растёт из руки. У Myriad Pro наоборот — рука из ноги. У Arial они выходят из одной точки. У Geneva просто приставлены сбоку.

Хвост

Хвост — калька с английского «tail». В латинице такие хвосты обычно смотрят вниз, вариантов как у кириллической «б» с хвостом наверх там нет.

А в кириллице у буквы «б» хвосты бывают самыми разными в разных гарнитурах. Это связано с тем, что начертание «б» ещё не устоялось окончательно: шрифтовые дизайнеры ищут всё новые формы. Поэтому когда в шрифтовой паре хвосты «б» сильно различаются или откровенно не сочетаются, это сразу бросается в глаза. Не игнорируйте этот элемент!

Апертура

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

Динамика и статика

Канадский типограф Роберт Брингхерст в книге «Основы стиля в типографике» говорит, в частности, о динамике и статике шрифта.

Динамика

Статика

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

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

Собрали для вас шесть ключевых признаков, по которым различают динамику и статику:

Плавность перехода от основного штриха к соединительному (в статике соединительный штрих приставлен под углом).
Разная сила контраста между основным и соединительным штрихами.
Симметричность и скругление засечек.
Круглость капель (продолжение темы плавности и непрерывного движения).
Вертикальность осей овалов.
Закрытость апертуры.

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

Ширина знаков

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

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

Как подбирать шрифтовую пару для проекта

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

Сравните высоту строчных (x-height). В паре она должна быть визуально близкой. Если при одинаковом кегле один шрифт кажется заметно крупнее другого — гармонии не будет.
Оцените контраст штрихов. Старайтесь не смешивать два гиперконтрастных шрифта (например, две «новые антиквы»). Лучше соедините контрастный акцидентный шрифт со спокойным, малоконтрастным.
Учитывайте статику и динамику.
Проверьте кириллические особенности. Посмотрите на хвост «б», свисающие элементы «д», «ц», «щ». Если в одном шрифте они вычурные, а во втором подчёркнуто лаконичные — единство нарушается.
Добейтесь схожести ширины знаков. Сильный разброс ширин в одной гарнитуре должен находить отклик во второй, иначе набор получится «рваным».

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

Статья основана на лекции Александра Серакова, основателя школы графического дизайна «Юниверс». Смотрите урок и другие материалы платформы, оформив пробный период всего за 130  ₽.

Редактор: Полина Бобышева