Как правильно оформлять тире, дефисы и кавычки

Это короткий знак, который используется внутри сложных и составных слов. В таких случаях пробелы по обе стороны дефиса не ставятся.

Это знак, который используется преимущественно для обозначения числовых, временных и других диапазонов.

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

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

В уроке разбираем правила оформления дополнительных типографических знаков. Научимся различать дефис, минус, короткое и длинное тире, правильно использовать кавычки «ёлочки» и работать со специальными символами в Figma.

Материалы урока:

• Дополнительные знаки в веб-дизайне - ссылка
• Плагин с коллекцией глифов Glyphs - ссылка

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

При быстром наборе текста многие разные знаки заменяются обычным символом с клавиатуры. Например, вместо тире, минуса или знака диапазона часто используется дефис. На этапе работы над макетом эти моменты стоит проверять и при необходимости исправлять.

Дефис — самая короткая из рассматриваемых черточек. Он используется в сложных и составных словах, например:

светло-зелёный

В таких конструкциях пробелы по обе стороны знака не нужны. Неправильно оформлять слово так:

светло - зелёный

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

Знак минуса используется в математических и числовых выражениях. Внешне он может быть похож на дефис, но отличается длиной и положением относительно строки.

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

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

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

• 2020–2025;
• 6–17 часов;
• других числовых интервалов.

Между числами и коротким тире пробелы не ставятся.

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

Длинное тире применяется в более крупных синтаксических конструкциях. В уроке рассматривается несколько ситуаций.

Оно используется при формулировке определений:

Типографика — это система организации текста.

Также длинное тире может обозначать пропущенную часть предложения:

За выполнение правил — награда.

Ещё один вариант — соединение двух связанных частей предложения без союза:

Заполни анкету — получи бонус.

В таких конструкциях тире визуально разделяет смысловые части и помогает быстрее понять структуру фразы.

На клавиатуре быстрее всего поставить обычный дефис, поэтому им часто случайно заменяют остальные знаки.

В результате:

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

Поэтому после набора текста полезно пройтись по макету и проверить, где действительно нужен дефис, а где — другой знак.

На русскоязычных сайтах основной вариант оформления кавычек — «ёлочки».

Например:

Компания представила продукт «Новая линия».

Обычные прямые двойные кавычки в русской типографике для таких конструкций использовать не стоит.

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

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

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

Главное правило — внешние кавычки в русскоязычном тексте должны сохранять формат «ёлочек».

Запоминать числовые комбинации для всех типографических символов неудобно. Кроме тире и кавычек, в работе могут понадобиться:

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

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

Такой подход удобнее, чем каждый раз искать код символа или копировать его из стороннего источника.

Для обработки больших объёмов текста можно использовать типографический плагин. Он способен автоматически исправлять часть распространённых ошибок, например:

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

Но автоматическую обработку нельзя воспринимать как абсолютное правило. В сложных или нестандартных конструкциях плагин может определить знак неправильно.

Поэтому после обработки текст необходимо просмотреть вручную.

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

Поэтому оптимальная схема работы выглядит так:

• подготовить текст;
• выполнить автоматическую типографическую обработку;
• проверить результат;
• вручную исправить спорные места;
• отдельно проверить кавычки, тире и нестандартные символы.

Так плагин экономит время, но окончательное решение всё равно остаётся за дизайнером.

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

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

Перейти к следующему уроку