Урок 5

Текст и типографика

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

Перейти к заданию ↗

Вспоминаем

Перед новой практикой

Три небольших вопроса по предыдущему уроку. Выбери ответ и нажми «Проверить».

Нужные команды

Клавиши для практики

Сочетания для Windows. Переключи клавиатуру на английскую раскладку. Перед командой заверши ввод текста.

TText - текст

EscЗавершить ввод текста

Сначала пробуем

Текст - отдельный слой

Text (текст) позволяет добавлять надписи. Нажми T и щёлкни на рабочей области: появится текст, который растёт по мере ввода. Для абзаца нажми T и протяни область нужной ширины: строки будут переноситься внутри неё.

Заголовок и абзац решают разные задачи. У абзаца есть заданная ширина.

Попробуй в Figma

Создай надпись «Между строк». Нажми Esc и выбери текстовый слой.

Создай рядом текстовую область шириной 240 px. Введи «Книжная мастерская для тех, кто любит истории» и посмотри на перенос строк.

Сначала пробуем

Размер и начертание

Выдели текст. В правой панели в разделе Typography (типографика) выбери шрифт, Size (размер) и начертание. Regular - обычное, Bold - жирное. Один шрифт с двумя начертаниями уже помогает разделить роли текста. Для этой афиши достаточно Inter.

Крупный Bold привлекает внимание к названию, обычный текст раскрывает подробности.

Попробуй в Figma

Установи заголовку Inter Bold, 64 px, а описанию Inter Regular, 24 px.

Добавь строку «Библиотека • творческая мастерская» размером 18 px. Сравни три уровня текста.

Идеи в кадре

Соберём идеи и превратим их в аккуратную творческую работу. У текста есть понятные роли и свободное место.

Нажми на варианты и сравни.

Сначала пробуем

Интервалы и читаемость

Line height (межстрочный интервал) задаёт расстояние между строками. Для абзаца размером 24 px попробуй 34 px. Выравнивание по левому краю помогает глазу находить начало строки. Слишком узкая область создаёт много переносов; слишком длинная строка затрудняет чтение.

Тексту нужен воздух между строками и вокруг блока.

Попробуй в Figma

Измени ширину абзаца с 240 до 320 px. Проверь, как изменились переносы.

Поставь Line height 34 px и выровняй абзац по левому краю. Проверь контраст текста с фоном.

Самостоятельная работа

Афиша «Между строк»

Собери афишу книжной мастерской «Между строк». В шаблоне есть образец и тексты для начала работы. Придумай собственное расположение и цвета, сохраняя понятную иерархию.

Создать копию в Figma ↗

Кнопка создаёт копию шаблона. Для этого нужно войти в свой аккаунт Figma. Работай в собственной копии. Инструкции и образцы заблокированы.

Создай фрейм «Афиша» размером 600 × 800 px.

Добавь название, описание мастерской и строку с местом проведения.

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

Добавь 2-3 простые фигуры, которые поддерживают тему и сохраняют читаемость.

Проверь свою работу

Отмечай пункты после проверки в Figma.

Фрейм 600 × 800 px назван «Афиша»Есть название, описание и место проведенияУ текста три заметно разных уровняИспользован один шрифт и максимум два начертанияТекст контрастный, строки не обрезаныТекстовые слои имеют понятные названия

Если закончил раньше

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

Готовый результат

Сохрани работу

Выдели итоговый фрейм или контейнер в Layers. В правой панели открой Export (экспорт), выбери PNG и нажми Export. Сохрани на флешку, назови файл своим именем.

← Урок 4 Урок 6 →