Приветствуем, дорогие читатели! Помните, как мы с вами создавали первую кнопку, изучали инструменты и работали с цветами? Теперь пришло время собрать все знания воедино и освоить последний штрих, который превращает макет в шедевр — искусство типографики.
Вы наверняка заметили: в профессиональных макетах текст выглядит иначе. Он не просто «написан», а тщательно выверен. Сегодня я научу вас тем же приемам, которые используют дизайнеры в топовых студиях.
Основа: от двух шрифтов к системе
Мы уже знаем, как важно называть слои и создавать стили цветов. С текстом та же история!
Золотое правило: Используйте не более двух шрифтов — как мы используем ограниченную палитру цветов.
- Для заголовков — выразительный шрифт (часто с засечками)
- Для основного текста — удобочитаемый шрифт без засечек
Три параметра, которые изменят всё
Откройте панель Text справа. Обратите внимание на три ключевых параметра:
1. Межбуквенный интервал (Letter Spacing)
- Заголовки: Увеличивайте (1-3), чтобы текст «дышал»
- Текст капсом: Обязательно увеличивайте (2-5)
- Основной текст: Часто оставляют 0
2. Высота строки (Line Height)
- Идеальная формула: 120-150% от размера шрифта
- Пример: для текста 16px ставьте 20-24px
- Длинные тексты: делайте больше, короткие — меньше
Создаем текстовые стили: как с цветами, только для текста
Помните, как мы создавали стили цветов, чтобы переиспользовать их по всему макету? С текстом — та же мощная логика!
Как создать текстовый стиль:
- Настройте текст-образец
- В панели Text нажмите на ••••
- Кликните + и дайте понятное имя
Базовый набор стилей:
- H1 / Heading 1 (32px, Bold)
- H2 / Heading 2 (24px, SemiBold)
- Body / Default (16px, Regular)
- Caption (14px, Regular)
Теперь, если нужно изменить шрифт во всем макете, вы делаете это в одном месте!
Резюме:
- Система вместо хаоса — 2 шрифта, как ограниченная палитра
- Три волшебных параметра — Letter Spacing, Line Height, Кернинг
- Стили — ваша суперсила — создавайте как для цветов
- Согласованность — используйте вместе со стилями цветов
Теперь ваш макет будет выглядеть как работа профессионала — где каждая деталь, включая текст, живет в гармонии со всеми остальными элементами.
Ставьте «палец вверх», если теперь видите текст не просто как набор букв, а как важнейший элемент дизайна, и подписывайтесь на канал. Впереди — работа с эффектами и тенями!