Символы в типографике

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

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

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

Высота строчных букв (X-height)

Высота строчных знаков (x-height) — это базовый размер «тела» строчной буквы без учёта верхних и нижних выносных элементов (как у «б», «р» или «у»). Название пошло от латинской буквы «x»: у неё нет выступов, и она идеально подходит для эталона.

Чем выше этот параметр, тем крупнее выглядит шрифт и тем легче его читать даже в мелком кегле. Посмотрите на ту же Helvetica: если набрать её 8-м кеглем, текст останется чётким и не потребует напряжения глаз. А вот шрифты с низким очком строчных (например, классические книжные гарнитуры) в таком же размере могут потребовать приглядеться.

Высота прописных/заглавных букв (Cap height)

Высота прописных знаков (Cap Height) — это расстояние от линии шрифта до верха заглавной буквы. Проще говоря, это рост заглавных литер в гарнитуре.

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

А вот буквам с округлыми или острыми формами (скажем, О, С или А) часто требуется чуть больше пространства. Чтобы глаз не обманывался и такая буква казалась одного роста с соседями по строке, её немного выпускают за линию cap height. Это называется оптическим выравниванием.

Основной штрих (Stroke)

Штрих (stroke) — это линия (прямая или изогнутая), из которой состоит буква. Все символы в любом алфавите строятся из комбинаций таких штрихов.

Возьмём для примера буквы с прямыми штрихами: в латинице это w, k или l. В кириллице к ним можно отнести п, н или ц — они собраны из вертикальных и горизонтальных линий.

А вот буквы с изогнутыми штрихами: в английском языке это c, o или s, в русском — с, о или э. Здесь линии плавные, без углов.

Штрихи — это алфавит дизайнера: меняя их толщину, форму и характер (прямые или изогнутые), мы создаём совершенно разное настроение шрифта.

Верхний выносной элемент (Ascender)

Верхний выносной элемент (ascender) — это часть строчной буквы, которая поднимается выше её основного корпуса (выше так называемой линии x-height, то есть высоты строчных знаков). Проще говоря, это те самые «хвостики», которые торчат вверх у букв «б», «в» или «к» в русском языке, и у b, d, f в латинице.

Верхняя граница, до которой дотягиваются эти элементы, называется линией выносных элементов сверху (ascender line). Она существует только на чертеже и помогает дизайнеру следить за тем, чтобы все «хвостики» были одной длины и не разбегались кто в лес, кто по дрова.

Нижний выносной элемент (Descender)

Нижний выносной элемент (descender) — это часть строчной буквы, которая свисает вниз с базовой линии (baseline). В латинице такие «хвостики» есть у g, j, p, q, y, в кириллице — например, у «у», «р» или «ф». Нижняя граница этих элементов фиксируется воображаемой линией выносных элементов снизу (descender line).

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

Засечки (Serif)

Засечки (serifs) — это небольшие декоративные элементы на концах штрихов букв. Это отличительная черта шрифтов с засечками (serif typefaces) — одних из самых старых гарнитур, получивших распространение ещё в ранних печатных изданиях. Наиболее известные примеры: Times New Roman, Georgia и Baskerville.

Шрифты с засечками создают ощущение элегантности, основательности и традиционного качества. Поэтому их часто можно встретить в брендах премиум-сегмента (например, Dior, Burberry) и в авторитетных изданиях, таких как The New York Times. В продолжительных текстах засечки помогают глазу удерживать строку, хотя в цифровых интерфейсах их использование требует особой аккуратности.

Кернинг (Kerning)

Кернинг (kerning) — это ручная или автоматическая корректировка расстояния между конкретными парами букв. Дело в том, что геометрия символов разная: после буквы с открытой формой (например, «Г», «Т», «А» в кириллице или W, Y, V в латинице) может возникать визуально лишний пробел, который мешает ровному ритму текста.

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

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

Трекинг (Tracking)

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

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

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

Базовая линия (Baseline)

Базовая линия (baseline) — это воображаемая горизонтальная линия, на которой «стоят» все знаки шрифта. Именно к ней привязаны буквы в строке, и именно от неё отсчитываются все вертикальные параметры: высота строчных, верхние и нижние выносные элементы. Всё, что опускается ниже этой линии (например, хвостики букв «у», «р» или «ф»), называется нижними выносными элементами (descenders).

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

Насыщенность (Weight)

Насыщенность (weight) — это степень жирности шрифта, то есть относительная толщина его штрихов. У большинства гарнитур есть несколько градаций насыщенности: от тонкого (light) до сверхжирного (black). Стандартный набор обычно включает лёгкий, обычный (regular), средний (medium) и жирный (bold) варианты.

В вебе для управления насыщенностью используют числовые значения font-weight от 100 до 900:

• 100 — тонкий (thin)
• 400 — обычный (normal / regular)
• 700 — жирный (bold)
• 900 — сверхжирный (black / heavy)

Совет! Крайние значения насыщенности (особенно 100–200 и 800–900) требуют аккуратности. Если взять слишком тонкое начертание в маленьком кегле, текст просто исчезнет. А если переборщить с жирностью, буквы начнут слипаться. В обоих случаях лучше увеличить размер шрифта, чтобы сохранить читаемость.

Табличные цифры (Tabular Figures)

Табличные (моноширинные) цифры (tabular figures) — это цифры, каждая из которых занимает строго одинаковую ширину. Благодаря этому число «1111» в таком начертании будет занимать ровно столько же места, сколько и «9999».

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

Совет! При работе с финансовыми или статистическими данными выбирайте гарнитуру, в которой табличные цифры предусмотрены изначально. Обычно эта опция есть в профессиональных шрифтах и называется Tabular Figures или Lining/Tabular.

Пропорциональные цифры (Proportional Figures)

Пропорциональные цифры (proportional figures) — это цифры, ширина которых зависит от начертания самого знака. Как и буквы, они могут быть узкими (как «1») или широкими (как «8»), за счёт чего пробелы между ними выглядят визуально равномернее и естественнее.

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

Лигатуры (Ligatures)

Лигатура (ligature) — это объединение двух или более символов в один знак (глиф). В латинице лигатуры решают проблему некрасивых соединений: например, у буквы «f» часто выступающий элемент сталкивается с точкой у «i» или перекладиной у «l». Отсюда классические пары fi, fl, ffi.

Для кириллицы эта тема менее актуальна. Из-за другой графики букв у нас почти нет конфликтов, требующих обязательных лигатур. В современной кириллице они встречаются в основном в декоративных или рукописных шрифтах (например, соединения «А» и «У», «Т» и «О»), но это скорее дизайнерский приём, а не техническая необходимость.

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

• Стандартные (standard) — fi, fl, ff, ffi, ffl. Улучшают читаемость в книжной вёрстке.
• Декоративные (discretionary) — ct, st, sp. Добавляют тексту ретро-характер.
• Редкие (unusual) — специфические сочетания fj, fk, которые встречаются не во всех языках.
• Лигатуры с длинной s (long s) — отсылка к старой типографике с удлинённой «s», сочетавшейся с h, l, i или t. Сегодня используются в исторических и декоративных шрифтах.

Источники

• Typeface anatomy — Wikipedia
• x-height — Wikipedia
• Material Design  | Material Design
• Kerning — an introduction for designers | Adobe
• Material Design  | Material Design
• TypeTalk: Know Your Figures | CreativePro Network  | CreativePro Network
• Basics of Ligature in Typography and Publishing  | ThoughtCo