Видеоурок

Артур Кузьмин

Время чтения 5 минут

1.Основы терминологии

В работе с текстом важно различать несколько понятий:

• Гарнитура — семейство шрифтов (например, Arial).
• Шрифт — конкретный вариант внутри гарнитуры (Arial Regular).
• Начертание — стиль шрифта: Regular, Bold, Italic и другие.

Основные виды шрифтов:

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

В веб-дизайне чаще всего достаточно хорошо подобранного гротеска с несколькими начертаниями.

2. Как выбирать шрифты

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

• Regular для основного текста;
• Medium или Semibold для акцентов;
• Bold для заголовков.

Это помогает сохранить целостность дизайна и избежать визуального хаоса.

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

3. Настройки текста в Figma

При работе с текстом важно понимать основные параметры:

• Размер шрифта — влияет на визуальную иерархию.
• Интерлиньяж — расстояние между строками.
• Letter spacing (трекинг) — расстояние между буквами.
• Paragraph spacing — расстояние между абзацами.

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

4. Важные параметры шрифта

У каждого шрифта есть свои характеристики:

• X-height — высота строчных букв, влияет на читаемость.
• Cap height — высота заглавных букв.
• Baseline — линия, на которой располагаются символы.
• Толщина штриха — влияет на визуальный вес текста.

Также существуют дополнительные настройки:

• капитель (Small Caps);
• стилистические варианты символов;
• разные виды цифр.

Но они доступны не у всех гарнитур.

5. Типографическая иерархия

Размеры текста должны помогать пользователю понимать структуру страницы.

Обычно создаётся размерный ряд:

• H1 — главный заголовок;
• H2-H5 — подзаголовки разных уровней;
• основной текст;
• подписи и вспомогательная информация.

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

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

6. Частые ошибки в типографике

В сложных блоках важно сначала определить иерархию:

• что пользователь должен увидеть первым;
• какая информация вторична;
• какие элементы можно объединить.

Для этого используются:

• размер;
• цвет;
• вес шрифта;
• расположение;
• отступы.

Отступы играют не меньшую роль, чем сами размеры текста. Именно они помогают разделять смысловые группы и создавать ритм.

Главное

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

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

Для тех, кто хочет участвовать в создании дизайн-библиотеки лично!