Тема № 3. Типографика
Третья тема курса ознакомит слушателей с типографикой и базовой версткой текста.
Цель занятия — научить участников курса работать с текстом в Figma, а именно выбирать шрифты, выстраивать иерархию, использовать правила вёрстки для создания читаемых и визуально привлекательных слайдов.
3.1 Лекция: Типографика - Определение типографики - Значение типографики в презентациях - Классификация шрифтов - Ключевые параметры в типографике: шрифт; гарнитура; кегль; межстрочное и межбуквенное расстояние - Типографическая иерархия
3.2 Тест на верстку текста
Домашнее задание: создать типографическую иерархию для презентации.
Типографика — это искусство и наука оформления текста: выбор шрифта, его размера, интервалов, размещения и визуальной структуры
Почему типографика важна в презентациях?
1. Управление вниманием Хорошая типографика помогает быстро определить, что главное на слайде. Иерархия заголовков, акценты, правильные интервалы — всё это направляет взгляд.
2. Повышение читабельности Если текст сложно читать — его не читают. Плотность, размер, контраст — всё это влияет на то, воспринимается ли ваш контент как «легкий» или «грузный».
3. Передача тона и стиля Типографика может быть нейтральной, деловой, дружелюбной, строгой, игривой — и всё это без слов. Один и тот же текст, набранный разными шрифтами, вызывает разную эмоциональную реакцию.
1. Шрифт и его классификация
Антиквенный шрифт
Гротескный шрифт
Рукописный шрифт
Акцидентный шрифт
2.Гарнитура
Гарнитура, или шрифтовое семейство, — шрифт из нескольких начертаний, которые объединены общим художественным замыслом. Чаще всего начертания в гарнитуре различаются по жирности и рисунку: прямому или курсивному.
пример гарнитуры
3. Кегль шрифта
Кегль — это размер символов, измеряемый в пунктах (pt). В контексте презентаций он играет важную роль: текст должен быть читаемым с любого расстояния, особенно в офлайн-презентациях на проекторе
Кегль можно настроить в правой панели инструментов в Figma.
3. Интерлиньяж (межстрочный интервал)
Межстрочный интервал — это расстояние между базовыми линиями соседних строк текста. Он влияет на восприятие плотности и удобство чтения.
Слишком плотный текст выглядит «сбитым», тяжело читается и создаёт ощущение перегруженности. А слишком разреженный — теряет связность, особенно в параграфах. Хороший межстрочный интервал помогает глазу двигаться по строкам без усилий и способствует лучшему восприятию информации.
В Figma line-height настраивается в свойствах текста.
4. Трекинг (межбуквенный интервал)
Межбуквенный интервал — это расстояние между символами в строке. Он может быть тонким инструментом для создания акцента и визуального ритма. Например, в заголовках увеличение spacing на несколько процентов может помочь придать надписи лёгкость.
Однако в основном тексте лучше оставлять стандартный интервал. Слишком разреженные буквы усложняют чтение, создают ощущение «разорванности», а слипшиеся — наоборот, теряются визуально и перегружают восприятие.
В Figma межбуквенный интервал настраивается через Letter spacing в правой панели инструментов.
Типографическая иерархия — это способ визуально упорядочить текст так, чтобы каждый элемент (заголовок, подзаголовок, текст, подпись) имел свой уровень значимости и был воспринят смотрящим в нужной последовательности
Пример составляющих в иерархии в презентациях:
Заголовок (H1) — Крупный, яркий, сильный по контрасту — Несёт основную мысль слайда — Должен читаться за 1–2 секунды
Подзаголовок (H2) — Чуть меньше и слабее по тону — Конкретизирует или дополняет заголовок
Основной текст (body) — Размер средний — Несёт основную информацию, описания, списки
Доп. текст / подписи / ссылки (caption) — Самый мелкий и ненавязчивый — Часто серый, с меньшим контрастом
Выбери верный вариант верстки текста
Результаты: 3/3 — «отлично» 2/3 — «хорошо» 1/3 — «удовлетворительно» 03 — попробуй еще раз
Домашнее задание
1. Создать типографическую иерархию для презентации:
H1 — подобрать размер и начертание шрифта для заголовков.
H2 — подобрать размер и начертание шрифта для подзаголовков.
Body — подобрать размер и начертание шрифта для основного текста
Caption — подобрать размер и начертание шрифта для мелкого доп. текста
Важно: цвет текста и его насыщенность может варьироваться в зависимости от важности текста (это может быть H1 или, например, caption)
