Практика: выстраиваем систему типографических стилей в прототипе

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

В уроке систематизируем типографику прототипа в Figma: выделяем повторяющиеся категории текста, создаём для них стили и приводим разрозненные элементы к единой системе. Дополнительно определяем шрифтовую пару и настраиваем базовые параметры для дальнейшей работы над дизайном.

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

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

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

Перед созданием стилей необходимо проанализировать прототип и определить повторяющиеся типы информации. В рассматриваемом проекте можно выделить:

• пункты меню;
• заголовок главного экрана;
• дескриптор главного экрана;
• заголовки блоков;
• подзаголовки блоков;
• заголовки карточек;
• стандартный наборный текст;
• акцентный жирный текст;
• текст кнопок и ссылок;
• цитаты.

Не каждому текстовому элементу нужен собственный стиль. Если два объекта выполняют одинаковую смысловую функцию, их лучше объединить одной системой оформления.

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

Принцип стилей применяется не только к тексту. Если на странице повторяется одинаковая заливка секций, для неё также можно создать отдельный цветовой стиль, например «Фон блока».

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

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

Главный заголовок обычно является самым крупным текстовым элементом страницы и используется один раз. Для него стоит создать отдельный стиль, например «Заголовок главного экрана».

В рамках стандартного десктопного макета с контейнером около 1100 px можно ориентироваться примерно на 50–80 px, но конкретный размер зависит от длины фразы и будущей композиции. Если заголовок содержит длинные слова, чрезмерное увеличение кегля может привести к нежелательному переносу на три и более строк.

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

Для всех основных секций создаётся единый стиль «Заголовок блока». Такие заголовки должны выглядеть заметно спокойнее главного заголовка, но при этом достаточно активно отделять один раздел страницы от другого.

В качестве ориентировочного диапазона для стандартного десктопного проекта можно использовать размеры около 32–42 px. Например, если главный заголовок имеет размер 60 px, заголовки разделов можно сделать около 40 px.

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

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

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

Например, можно создать отдельные стили:

• «Подзаголовок блока» — для дополнительной информации непосредственно под основным заголовком секции;
• «Заголовок карточки» — для названий отдельных элементов внутри блока.

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

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

Большая часть информации на странице относится к обычному наборному тексту. Для неё достаточно одного основного стиля, например «Текст стандарт».

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

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

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

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

Например, структура:

• название преимущества
• описание преимущества

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

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

Так структура макета остаётся понятной и не превращается в большое количество лишних слоёв.

Для цитаты можно создать собственный стиль. Один из способов визуально отделить её от стандартного текста — использовать Italic.

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

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

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

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

Не нужно автоматически создавать новый текстовый стиль для каждой разновидности кнопки. Сначала стоит определить, действительно ли отличается именно текст или меняется только внешний вид контейнера.

Уже на этапе прототипа можно определить базовую шрифтовую пару проекта. В рассматриваемом примере используется сочетание:

• выразительной акцентной гарнитуры для крупных заголовков;
• Montserrat для основного текста.

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

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

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

Если сначала полностью перенести страницу, а затем начать систематизацию, каждый существующий элемент придётся отдельно проверять и привязывать к нужному стилю.

Поэтому эффективнее работать постепенно:

1. создаётся первый элемент определённой категории;
2. для него сразу настраивается стиль;
3. следующие аналогичные элементы сразу получают этот стиль;
4. при необходимости параметры корректируются централизованно.

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

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

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

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

Домашнее задание