САМыЙ БОЛЬШОЙ ПАКЕТ КУРСОВ UPROCK CO СКИдКОЙ 80%

Гайд по типографике: основные термины

Автор статьи:
,

Введение

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

Основные термины

Шрифт — способ написания набора символов (буквы, цифры, пунктуационные знаки) с одинаковым размером, пропорциями и стилем.

Гарнитура (Семейство шрифтов) — это группа шрифтов, которые объединены общим стилем.

Четыре начертания гарнитуры Sans Serif
Помните: шрифт и гарнитура — это разные понятия. Гарнитура — более широкое определение, которое включает в себя шрифт. Например, шрифт Helvetica, а гарнитура — Sans Serif (без засечек).

Кегль — размер шрифта по вертикали, т. е. высота букв. Обычно измеряется в пунктах (pt). Как правило, диапазон размера основного текста на сайтах — 12-18 пунктов, а заголовки — от 20 pt.

Интерлиньяж (междустрочный пробел) — расстояние между базовыми линиями строк. В зависимости от программы может измеряться в различных единицах. Обычно интерлиньяж на 15-25 % больше кегля. Например, если кегль 12 pt, то интерлиньяж — 16 pt.

Важно! Чем больше кегль, тем больше интерлиньяж. Однако в заголовках межстрочный интервал может быть намеренно сокращен для достижения драматизма и выразительности.

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

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

  • положительный (разряженный),
  • нормальный,
  • отрицательный (плотный).

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

Графема буквы "а"

Глиф — это конкретное изображение графемы в определенном шрифте.

Глифы буквы "а" в разных шрифтах

Апертура — степень открытости форм знаков, таких как e, c, s.

Апертура может быть:
  • открытая/большая (пример: Marco, Fedra),
  • закрытая/малая (пример: Bodoni, Austin),
  • полузакрытая/промежуточная (пример: Georgia).

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

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

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

Маюскульные — высота этих знаков равна прописным буквам. Они не имеют выносных элементов.

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

Классификация шрифтов

Наборные шрифты используются для основного текста.

Характеризуются читабельностью и легкостью распознавания символов. Имеют минимум декоративных элементов:

Антиква

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

Примеры: Times New Roman, Garamond, Baskerville, Georgia, Palatino.

Шрифт Times Roman
Автор Илья Наседкин. Сайт WAXPRO

Брусковый

Slab Serif — интерпретация шрифта с засечками, но с плоскими и квадратными, а не изогнутыми. Толщина засечек равна толщине символов.

Примеры: Arvo, Copse, Roboto Slab.

Шрифт Rockwell Regular
www.oculus.com

Гротеск

Шрифт без засечек (Sans Serif) ассоциируется с ясностью, универсальностью, современностью и эффективностью.

Примеры: Open Sans, Oswald, Arial.

Шрифт Arial Regular
Автор Andrew Merk. Сайт: Самарская область

Рукописный

Шрифты, имитирующие ручное письмо (Script). Они очень разнообразны и могут ассоциироваться с разными чувствами и эмоциями.

Примеры: Alex Brush, Pacifico.

Шрифт Arizonia Regular
lauramarot.com

Акцидентные шрифты

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

Несколько примеров ниже:

Геометрические шрифты созданы из простых геометрических форм и лишь условно напоминают символы традиционной формы. Например, New Zelek, Rastr.

Шрифт Null Normal
vastega.io

Имитационные подражают уже существующим или когда-то существовавшим способам проектирования символов. Например, шрифт SK Fushimi, который отсылает к японской современной культуре:

Шрифт SK FUSHIMI COMPLETE FAMILY
mtmuseum.ru

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

Шрифт Cloister Initials

Виды начертаний

Начертание — это внешний облик символа:

  • Прямой (Regular) — вертикальное расположение знаков, обычно используется для основного текста.
  • Курсив (Italic) — символы, расположенные под наклоном.
  • Жирный (Bold) характеризуется увеличением толщины знаков.
Шрифт PT Sans Serif

Анатомия буквы

Базовая линия — воображаемая прямая линия, проходящая по нижнему краю прямых знаков без учёта нижних выносных элементов.

Высота букв — расстояние от базовой линии до верхнего края буквы.

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

  • верхний выносной элемент — «б, ф»
  • нижний выносной элемент или нижний спуск — «р, д, у, ф, ц»

Внутрибуквенный просвет — пространство, которое полностью или частично ограничено формой буквы или символа. Например: A, B, D, O, P, Q, R, a, b, d, e, g, o, p и q.

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

Диакритический символ — элемент знака, который изменят начертание буквы и набирается отдельно. Такие символы ставятся над буквой, под ней или пересекают её. Например, й ё ô è.

Термины, связанные с текстом

Выключка — способ выравнивания текста относительно вертикальной оси: по левому краю, по центру, по правому краю и по ширине.

Выравнивание — расположение текстовых блоков относительно макета.

Абзацный отступ — отступ в начале первой строки абзаца. Как правило, равен 4 символам или одной части кегля: если кегль 10, то отступ 10 pt.

Швейцарский абзац или слепая строка — отделение абзацев пустой строкой без отступа.

Висячие предлоги — предлог, который остался в конце строки, хотя относится по смыслу к слову в начале следующей строки. Рекомендуем переносить некоторые такие предлоги на новую строку.

Висячая строка — это слово-одиночка (вдова) или очень короткая строка (сирота) текста в конце абзаца.

Заключение

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

Бесплатный учебник по UX/UI‑дизайну
Все лонгриды