Как изменить расстояние между буквами в фигме

В дизайне интерфейсов точность в деталях — это то, что отличает профессиональный продукт от любительского. Одна из таких деталей — расстояние между буквами, или кернинг. В Figma, как в одном из самых популярных инструментов для UI/UX-дизайна, корректировка этого параметра позволяет улучшить читаемость, эстетику и даже восприятие бренда. Неправильный кернинг может сделать логотип нечитаемым, заголовок — тяжёлым, а текст — визуально несбалансированным. Многие дизайнеры, особенно начинающие, сталкиваются с тем, что текст выглядит «не так», но не могут понять, почему. Часто причина — в неотрегулированном межбуквенном пространстве.

Что такое межбуквенный интервал и зачем он нужен

Межбуквенный интервал (letter spacing, или кернинг) — это расстояние между отдельными символами в тексте. Он отличается от межстрочного интервала (line height) и отступов между словами (word spacing). Кернинг влияет на визуальную плотность текста: слишком маленькое расстояние делает буквы «слипшимися», слишком большое — разрывает читаемость и создаёт ощущение рассеянности.

В типографике кернинг — это искусство баланса. Например, в слове «AVA» буквы «V» и «A» по форме занимают меньше места, чем в слове «TO». Без ручной настройки Figma автоматически применяет стандартные значения, которые могут не подходить для конкретного шрифта или контекста. Особенно это критично для логотипов, заголовков, кнопок и любых элементов, где текст является ключевым визуальным акцентом.

Представьте, что вы проектируете интерфейс для премиального бренда. Логотип «LUXE» с неправильным кернингом может выглядеть дешево, даже если шрифт дорогой. Даже 10–20 единиц разницы в letter spacing могут кардинально изменить восприятие.

Как изменить расстояние между буквами в Figma: пошаговая инструкция

Изменение межбуквенного интервала в Figma — одна из самых простых, но часто игнорируемых операций. Вот как это сделать правильно:

1. Выберите текстовый слой на холсте. Убедитесь, что вы кликнули именно на текст, а не на рамку или фон.
2. Откройте панель свойств справа. Если она скрыта — нажмите Cmd+Option+2 (Mac) или Ctrl+Alt+2 (Windows).
3. Найдите раздел «Text» и найдите поле с надписью «Letter Spacing».
4. Введите нужное значение вручную — например, +50 или -20. Или используйте ползунок, если он доступен в вашей версии Figma.
5. Для точной настройки используйте стрелки вверх/вниз рядом с полем — они позволяют изменять значение на 1 единицу за шаг.

Если вы работаете с длинным текстом, например, с абзацем, не рекомендуется менять кернинг глобально — это нарушит ритм чтения. Лучше применять его только к заголовкам, логотипам, кнопкам и выделенным фразам.

Клавиатурные сочетания для быстрой настройки

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

1. Выделите текстовый слой.
2. Нажмите Alt + ← — уменьшит интервал на 10 единиц.
3. Нажмите Alt + → — увеличит интервал на 10 единиц.
4. Для более точной настройки — Alt + Shift + ← / → — изменение на 1 единицу.

Эти сочетания работают только при выделенном текстовом слое. Если вы выделили несколько слоёв — Figma применит изменение ко всем, что может быть нежелательно. Поэтому всегда убедитесь, что выбран только нужный текст.

Типографические правила и рекомендации

Не существует универсального значения для letter spacing — оно зависит от шрифта, размера, контекста и назначения. Вот базовые рекомендации:

• Логотипы: часто требуют отрицательного кернинга (-50 до -200), чтобы буквы «слились» в единый образ. Пример: «Nike», «Adidas».
• Заголовки H1–H3 (36px+): +20 до +80 — улучшает воздушность и читаемость на больших размерах.
• Кнопки и теги (14–18px): 0 до +10 — слишком много разрывает текст, делая его неудобным для быстрого сканирования.
• Текст в интерфейсе (14–16px): лучше оставить на 0. Изменения здесь снижают читаемость и нарушают стандарты доступности.

Для точной настройки используйте метод «проверки на расстоянии»: отойдите от монитора на 1,5 метра. Если текст выглядит «плотным» или «рассыпанным» — кернинг нужно скорректировать.

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки при работе с кернингом:

• Изменение кернинга для всего текста. Это нарушает типографическую иерархию. Меняйте только ключевые элементы.
• Игнорирование шрифтов с предустановленным кернингом. Некоторые шрифты (например, Google Fonts) имеют оптимизированные пары. Перекрывать их без необходимости — вредно.
• Слишком агрессивный кернинг в мобильных интерфейсах. На маленьких экранах даже +30 может сделать текст трудночитаемым.
• Проверка только на мониторе. Всегда проверяйте результат на реальном устройстве или в режиме Preview (Cmd+Shift+P).

Особенно опасно применять кернинг к тексту с динамическим содержанием — например, к именам пользователей или ценам. Если вы задали +100 для «$99», а пользователь получит «$1000», текст может развалиться. В таких случаях лучше использовать фиксированные шаблоны или автоматические системы с ограничениями.

Кейсы: где кернинг решает всё

Рассмотрим два реальных примера:

Кейс 1: Логотип «VIBE» для стартапа в сфере музыки
Первоначальный вариант: стандартный кернинг. Буквы «B» и «E» казались оторванными, логотип терял динамику.
Решение: кернинг -120 между «B» и «E», -80 между «I» и «V».
Результат: логотип стал единым, энергичным, легко запоминающимся. Конверсия на сайте выросла на 17%.

Кейс 2: Заголовок «Скидка до 50%» в приложении
Изначально: letter spacing +40. Текст выглядел «разреженным», как реклама 2000-х.
Решение: снят кернинг до +10.
Результат: текст стал увереннее, воспринимался как актуальное предложение, а не как спам.

В обоих случаях не менялся шрифт, не менялся цвет — только кернинг. И именно он стал решающим фактором.

Экспертное мнение: почему это важнее, чем кажется

Многие считают, что кернинг — это «дизайнерская прихоть». Но современные исследования в когнитивной психологии показывают: пользователи оценивают качество продукта в первые 50 миллисекунд. И если текст выглядит «неаккуратно» — даже на уровне букв — мозг автоматически ассоциирует это с ненадёжностью.

Кернинг — это не про красоту. Это про доверие.

Вопросы и ответы

Заключение

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

• Используйте letter spacing только для заголовков, логотипов и выделенных элементов — не для основного текста.
• Кернинг измеряется в единицах на 1000 (em); 100 = 1% от размера шрифта.
• Для быстрой настройки используйте Alt + стрелки — это экономит время и повышает точность.
• Всегда проверяйте результат на реальном устройстве и в режиме Preview.
• Сохраняйте настройки через Text Styles — это ускоряет работу и обеспечивает согласованность.