Типографика: основные параметры текста в веб-дизайне

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

Это семейство шрифтов, объединённых общим визуальным стилем. Например, Montserrat или Open Sans.

Это конкретное начертание внутри гарнитуры, например Montserrat Regular, Montserrat Medium или Montserrat Extra Light.

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

Это части букв, которые выходят за основные границы строки вверх или вниз, например нижние элементы у некоторых букв или верхние части строчных символов.

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

Это размер шрифта.

Это общее расстояние между буквами в текстовом фрагменте, также называемое межбуквенным расстоянием.

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

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

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

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

Текст при этом остаётся одной из ключевых составляющих сайта. Даже сильная графика не сможет полностью компенсировать плохо организованный и трудно читаемый контент.

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

Одна гарнитура может включать:

• Light;
• Regular;
• Medium;
• SemiBold;
• Bold;
• ExtraBold;
• курсивные начертания;
• дополнительные варианты.

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

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

У каждой строки текста есть собственная базовая линия, на которую визуально опирается основная часть символов. В Figma её можно заметить при работе с выделенным текстом.

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

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

В Figma межстрочное расстояние можно задавать двумя способами:

• относительным значением — в процентах;
• абсолютным значением — в пикселях.

Например, при размере текста 15 px значение 140% соответствует межстрочному расстоянию 21 px. Визуально результат в этот момент будет одинаковым, но разница становится заметна при изменении размера текста.

Если увеличить кегль при интерлиньяже, заданном в процентах, межстрочное расстояние также автоматически изменится пропорционально. При абсолютном значении оно останется прежним.

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

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

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

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

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

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

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

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

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

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

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

Эти параметры не нужно запоминать только ради терминологии. Гораздо важнее самостоятельно попробовать менять их в Figma, сравнивать относительные и абсолютные значения и наблюдать, как текст ведёт себя при изменении размера. Такая практика помогает быстрее понять взаимосвязь параметров и в дальнейшем осознанно использовать их при создании интерфейсов.

Перейти к следующему уроку