Как бы уникальны ни были гарнитуры, у них есть общие черты. Подобно человеческому телу, шрифт можно разделить на анатомические части, каждая из которых имеет своё название и назначение. Независимо от того, создаёте ли вы собственный шрифт или просто увлекаетесь типографикой, понимание анатомии поможет вам лучше разбираться в том, что делает гарнитуру хорошей или плохой, что влияет на её удобочитаемость и определяет её стиль.
Кроме того, вы сможете увереннее выбирать гарнитуру, подходящую вашим задачам и проекту. Определяет ли высота строчных букв (x-height) высоту строчной «x»? В каких случаях трекинг не справляется, и нужно использовать кернинг? Нужен ли специальный шрифт для цифр? После изучения анатомии шрифта вы будете уверенно отвечать на эти вопросы и свободно обсуждать типографику с другими дизайнерами.
Высота строчных букв (X-height)
Высота строчных букв (x-height) задаёт высоту всех строчных букв в гарнитуре. Термин получил название от буквы «x», которая используется в качестве эталона измерения.
Чем больше высота строчных букв, тем больше пространства занимает шрифт, и тем более удобочитаем он остаётся даже при маленьких размерах. Например, Helvetica при размере 8 пунктов всё ещё сохраняет чёткость и разборчивость.
Высота прописных/заглавных букв (Cap height)
Высота прописных букв (cap height) измеряется по высоте заглавных букв гарнитуры. Точнее всего измерения проводить по буквам с плоской основой, таким как L, E или M. Буквы с изгибами или острыми формами (например, S, O или A) могут немного выступать за линию высоты прописных букв для оптического выравнивания.
Основной штрих (Stroke)
Штрих (stroke) — это линия или изгиб, формирующие символы. В буквах «w», «k» и «l» эти линии прямые, а в буквах «c», «o» и «s» они изогнуты. Штрихи — основные строительные элементы любых букв, которые мы пишем или набираем.
Верхний выносной элемент (Ascender)
Верхний выносной элемент (ascender) — это вертикальный штрих у строчных букв (например, b, d, f, h, k, l, t), выступающий выше x-height или cap height гарнитуры. Невидимая линия, обозначающая верхнюю границу таких элементов, называется линией выносных элементов сверху (ascender line).
Нижний выносной элемент (Descender)
Нижний выносной элемент (descender) — это часть строчной буквы, опускающаяся ниже базовой линии (baseline). Такие «хвостики» есть у букв g, j, q, p, y и иногда f, и нижняя точка отмечается невидимой линией — линией выносных элементов снизу (descender line).
Совет! Если нижние выносные элементы слишком длинные, они могут пересекаться с верхними выносными элементами букв следующей строки. Исправить это можно подбором синонимов без подобных элементов либо увеличением межстрочного интервала.
Засечки (Serif)
Засечки (serifs) — это небольшие декоративные элементы на концах штрихов букв. Это отличительная черта шрифтов с засечками (serif typefaces) — одних из самых старых гарнитур, которые получили распространение ещё в ранних печатных изданиях. Наиболее популярные примеры шрифтов с засечками: Times New Roman, Georgia и Baskerville.
Шрифты с засечками создают ощущение элегантности, доверия и высокого качества. The New York Times, Huffington Post, Dior и Burberry используют шрифты с засечками в своих брендах.
Кернинг (Kerning)
Кернинг (kerning) — это корректировка расстояния между отдельными буквами для достижения гармоничного визуального результата. Определённые сочетания символов (часто включающие широкие или открытые буквы вроде W, Y, V или T) имеют большие промежутки и выглядят неестественно.
Некоторые шрифты имеют хороший кернинг на небольших размерах, но выглядят несбалансированно в крупном тексте (например, в заголовках). Это происходит потому, что многие бесплатные (а иногда и дешёвые) шрифты не имеют встроенного кернинга и требуют ручной настройки.
Совет! Экспериментируйте с кернингом, чтобы создавать уникальные варианты логотипов.
Трекинг (Tracking)
Трекинг (tracking) регулирует расстояние между буквами во всём тексте сразу. Увеличенный трекинг делает текст более воздушным и иногда используется для подчёркивания слова, особенно в сочетании с прописными буквами или капителью. Как и кернинг, трекинг часто применяется в заголовках и логотипах, чтобы убрать лишние пробелы в тексте большого размера.
Белый текст на чёрном фоне обычно воспринимается более читаемым при увеличенном трекинге.
Базовая линия (Baseline)
Базовая линия (baseline) — это невидимая горизонтальная линия, на которой располагаются все буквы. Всё, что находится ниже базовой линии, называется нижними выносными элементами (descenders).
Базовая линия определяет нижнюю границу высоты строчных букв (x-height) и играет важную роль при измерении вертикального расстояния между текстом и другими элементами дизайна.
Насыщенность (Weight)
Насыщенность (weight) обозначает относительную толщину штриха шрифта. Стандартная гарнитура обычно имеет от 3 до 6 вариантов насыщенности, таких как лёгкий (light), обычный (regular), средний (medium) и жирный (bold).
В CSS веб-дизайнеры используют числовые значения для свойства font-weight:
- 100 — тонкий (thin)
- 400 — обычный (normal или regular)
- 700 — жирный (bold)
- 900 — сверхжирный (black или heavy).
Совет! При использовании очень тонких (100–200) или сверхжирных (800–900) шрифтов применяйте более крупный размер текста, иначе он будет плохо читаемым.
Табличные цифры (Tabular Figures)
Табличные (моноширинные) цифры (tabular figures) занимают одинаковую горизонтальную ширину. Например, число «1111» займёт столько же места, сколько и число «9999».
Дизайнеры используют табличные цифры в таблицах годовых отчётов, прайс-листах, финансовых отчётах, счетах-фактурах и других таблицах, где числа постоянно меняются и должны быть ровно выровнены. Благодаря табличным цифрам пользователи легко сканируют и сравнивают числовые данные.
Совет! Выбирайте гарнитуру, которая изначально поддерживает табличные цифры.
Пропорциональные цифры (Proportional Figures)
Пропорциональные (нелинейные) цифры имеют разную ширину, благодаря чему пробелы между ними выглядят равномернее и гармоничнее. Дизайнеры используют пропорциональные цифры в заголовках, подзаголовках или другом тексте, где числа должны органично вписываться в общий текстовый контекст и не требуют вертикального выравнивания с другими цифрами.
Лигатуры (Ligatures)
В типографике лигатура (ligature) — это комбинация из двух или более символов или букв, объединённых в один глиф. Наиболее распространённые лигатуры — fi, fl и ff, так как строчная буква f имеет характерную форму, перекрывающую соседние буквы. Другая известная лигатура — амперсанд (&), представляющая собой сочетание латинских букв e и t из слова «et», означающего «и».
В зависимости от назначения в тексте, лигатуры можно разделить на 4 типа:
- Стандартные (standard): лигатуры fi, fl, ff, ffi, ffl и ft используются для улучшения читаемости и визуальной привлекательности текста.
- Декоративные (discretionary): лигатуры ct, fs, st, sp, которые выполняют декоративную функцию и создают ретро-стиль.
- Редкие (unusual или uncommon): стандартные и декоративные лигатуры, редко встречающиеся в тексте, такие как fj, fk или ij.
- Лигатуры с длинной 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