Текст и читаемая иерархия

Курс «Макет учебного портала в Figma»

У нас есть рабочая ширина портала «Маршрут» и линии выравнивания. Однако аккуратная сетка ещё не объясняет, что на странице главное. Читатель должен быстро заметить название раздела, затем понять назначение курса и лишь после этого прочитать дополнительные сведения. Эту последовательность зададим через типографику и содержание, сохраняя одни и те же учебные данные.

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

Семейство, размер и межстрочный интервал

Для учебного примера используйте Inter, если шрифт доступен в вашем окружении Figma. Если он отсутствует, выберите доступное семейство с кириллицей и запишите замену на странице 01 Foundations. Не смешивайте похожие шрифты случайно: даже при одинаковом размере они могут иметь разную ширину и заметно менять переносы.

Зададим Display размером 48 с межстрочным интервалом 56, Heading — 28/36, Body — 18/28 и Label — 14/20. Первое число означает размер шрифта, второе — высоту строки. Для заголовков используем начертание Semibold, для обычного текста Regular. Числа являются исходным решением нашего проекта; они должны выдержать длинные русские строки, а не только короткий английский образец.

Введите заголовок «Освойте веб-разработку шаг за шагом». Под ним разместите описание: «Выберите курс, разберите пример и примените новый приём в своём проекте». Ширина текстовой области составляет 720. Наблюдайте, сколько строк занимает заголовок, как отделён от него абзац и не выглядит ли пояснение таким же заметным, как основная фраза.

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

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

Стили как общий договор

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

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

Примените Heading к названию пробной карточки «Сетка каталога», а Label — к строке «Базовый · 8 уроков». Затем замените заголовок на «Запросы к API: отправка и обработка ответа». Длинная строка выявит, может ли слой вырасти по высоте. Не сокращайте текст только потому, что заранее выбранный прямоугольник оказался тесным: сначала исправьте модель размера.

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

Переносы и длина строки

На мобильном фрейме шириной 390 оставьте тексту 350. Для основного заголовка создадим роль Display/Mobile с параметрами 32/40. Это отдельный размер для того же смыслового уровня, а не снижение важности заголовка. Не уменьшайте весь экран пропорционально: обычный текст и кнопки должны оставаться читаемыми, когда доступная ширина сократилась.

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

Ручной перевод строки допустим, когда перенос является частью конкретной композиции, например в рекламном заголовке. В учебном каталоге он чаще маскирует слишком жёсткую ширину. Слово, которое красиво стояло на второй строке desktop, на телефоне может оставить одинокую короткую строку. Удалите ручной перенос и сначала посмотрите естественное распределение текста.

Русский текст содержит короткие предлоги, длинные названия технологий и числовые сведения. Перенесите в образцы «Работа с Git в команде» и «8 уроков по 20 минут», чтобы увидеть реальные условия. Учебная шкала, которая проверена только на слове «Course», не даёт достаточного представления о будущей странице. Размеры текста должны обслуживать язык и содержание проекта.

От текста макета к тексту страницы

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

Добавьте на 01 Foundations подписи ролей и по одному содержательному примеру. Для Body используйте небольшой учебный абзац о колонках; для Label — метаданные курса. Отдельно укажите, что цвет текста будет назначаться по смысловой роли в следующем уроке. Такой образец позволяет другому редактору применить стиль, не угадывая, где он уместен.

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