Как набрать текст интерфейса по правилам и удержать длину строки на любом экране

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

Ниже — страница «Доставка и оплата» в том виде, в каком её прислали. Шесть мест набраны с ошибкой, три — верно.

Нажимайте на подчёркнутые места: в разборе будет, что не так и как исправить.

В русском тексте — ёлочки, внутри них — лапки.

В «Ководстве» Лебедева отдельно сказано: ни в коем случае не знаки дюйма и не «программистские» кавычки. На клавиатуре есть только они, поэтому прямые кавычки попадают в макет из любого текста, набранного наспех.

Три разных знака, которые на клавиатуре превращаются в один.

Какое тире ставить в диапазоне

Здесь источники расходятся, и честнее сказать об этом прямо.

• Длинное тире — 2000—2009. Так диапазоны набирают по русской традиции. Бюро Горбунова в совете «Короткое или длинное тире?» пишет: «В нашей типографике вообще нет понятия среднего тире: есть просто тире, оно длинное».
• Короткое тире — 2000–2009. Его предложил Артемий Лебедев в § 158 «Ководства»: по английскому образцу, потому что длинное тире в роли диапазона «выглядит длинноватым».

Оба варианта встречаются в продуктах. Выберите один, запишите его в правила продукта и держитесь его на всех экранах. Ошибка — не выбор тире, а дефис на его месте или разнобой: «1–3 дня» в корзине и «1—3 дня» на странице доставки.

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

Интерфейс никогда не знает, где кончится строка: у одного человека телефон узкий, у другого крупный шрифт в настройках.

В «Ководстве» это сформулировано так: раз никто не знает, где предложение разобьётся на строки, обрабатывать надо все случаи.

Что привязывают неразрывным пробелом

• Короткие слова к следующему. По «Ководству», на конце строки не должны оставаться одно-, двух- и часть трёхбуквенных слов: предлоги и союзы привязывают к следующему слову, частицы — к предыдущему.
• Тире к предыдущему слову, чтобы оно не начинало новую строку.
• Число к единице и знаку валюты: 250 г, 3000 ₽, 5 кг.
• Разряды внутри числа: 12 000, чтобы число не разорвалось на две строки.

Числа

• Разряды отбивают пробелом: 12 000. Запятая в русском тексте отделяет дробную часть — 11 999,99, — поэтому «12,000» читается как двенадцать. Бюро Горбунова советует тонкий пробел, а браузер, форматируя числа для русского языка, ставит неразрывный. Главное, чтобы число не разорвалось на две строки.
• Четырёхзначные числа в сплошном тексте можно не разбивать: 3000. В таблице разбивают всегда, чтобы тысячи стояли друг под другом, — так советует Бюро.
• Знак рубля пишут через пробел после числа: 290 ₽.

Слишком короткую строку глаз читает рывками, слишком длинную — теряет, переходя на следующую.

• Мэтью Баттерик в Practical Typography советует 45–90 знаков в строке, считая пробелы.
• Material Design 3 для основного текста называет 40–60 знаков.
• WCAG на высшем уровне, AAA, требует, чтобы у читателя был способ сузить строку до 80 знаков. Это требование к возможностям читателя, а не норма для макета. Но как верхний предел оно полезно.

Как держать длину строки

• Ограничьте ширину текстового блока. Страницу целиком ограничивать не нужно: картинки и таблицы могут быть шире абзаца.
• Посчитайте знаки в своём шрифте. Наберите строку из 60 знаков вашим кеглем и посмотрите, какой ширины она вышла. В CSS для этого есть единица ch — ширина цифры 0; max-width: 60ch даёт около 60 знаков, точнее покажет только набор.
• При смене кегля ширину пересчитывают. Абзац 18 при той же ширине блока вмещает меньше знаков, чем абзац 16.

На широком макете текст помещается всегда. На экране 360 пикселей видно, где он ломается.

Откройте экран на трёх ширинах — телефон 360, планшет 768 и ноутбук 1440 — и пройдите по списку:

1. Висячие слова. Предлог или союз в конце строки, тире в начале.
2. Одно слово в последней строке заголовка. Заголовок из двух строк, где во второй одно короткое слово, выглядит недоделанным.
3. Длинные слова и адреса. Почта, ссылка, артикул, название на латинице могут не поместиться и вылезти за край.
4. Надписи на кнопках. «Оформить заказ» в две строки или обрезанное многоточием.
5. Длина строки на широком экране. Не растянулся ли абзац на всю ширину.

Что умеет браузер

• Выравнивание строк заголовка: text-wrap: balance делает строки примерно одной длины. Chrome выравнивает блоки до шести строк, Firefox — до десяти, поэтому это свойство для заголовков.
• Без одинокого слова в конце: text-wrap: pretty. Работает пока не во всех браузерах, на момент урока его нет в Firefox.
• Переносы по слогам: hyphens: auto. Работает, только если у страницы указан язык, lang="ru".

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

Второй шрифт нужен реже, чем кажется. Сначала выжмите всё из одного семейства.

Так советует Эллиот Джей Стокс в статье «Pairing typefaces» в справочнике Google Fonts: прежде чем брать второй шрифт, используйте начертания и размеры одного семейства.

Интерфейс магазина кофе набран одним гротеском в трёх начертаниях, и второй шрифт ему не нужен.

Он понадобился, когда в магазине появился раздел статей о кофе: для заголовков статей решили взять антикву.

Как подобрать пару

• Достаточно разные, но не слишком. В статье это сказано так: «different enough… but not too different». Почти одинаковые шрифты выглядят как ошибка, совсем разные спорят друг с другом.
• Если сомневаетесь — антиква и гротеск. Совет из той же статьи: шрифт с засечками в паре со шрифтом без засечек.
• Роли не пересекаются. Один шрифт — для заголовков статей, другой — для всего остального. Если оба встречаются в одной роли, пары нет, есть разнобой.
• Проверяйте на своём тексте. Название шрифта и витрина каталога скажут мало: наберите реальный заголовок и абзац из продукта.

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

В витрине каталога шрифт обычно показан латиницей.

Бюро Горбунова в совете про IBM Plex объясняет, почему кириллическая «к» там не похожа на латинскую «k». Латиницу рисовали первой, а в кириллице надо было сохранить характер шрифта и не навредить самим буквам.

Google в статье «Scripting Cyrillic» рассказывает, как к шрифтам из его каталога, например к Montserrat, дорисовывали кириллицу спустя годы после латиницы.

Как проверить

1. Отфильтруйте каталог по языку. В Google Fonts есть фильтр по письменности: Cyrillic и Cyrillic Extended — расширенная кириллица для других языков на кириллице.
2. Наберите одну фразу латиницей и кириллицей рядом, одним кеглем и начертанием. Кириллица не должна выглядеть светлее, темнее, шире или уже.
3. Проверьте каждое начертание, которое берёте, включая полужирное и жирное.
4. Проверьте знаки продукта: ₽, №, ёлочки и лапки, тире, минус, буква ё. Если знака нет, браузер возьмёт его из другого шрифта, и он будет выделяться.

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

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

Часть 1 · Корректура, 20 минут

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

ЭКРАН: ______________________        Дата: __.__.____

ПРАВКИ НАБОРА (было → стало — правило)
____________ → ____________ — кавычки / черта / пробел / число
____________ → ____________ — ______________________________
____________ → ____________ — ______________________________

ТИРЕ В ДИАПАЗОНАХ: короткое / длинное (одно на весь продукт)

ДЛИНА СТРОКИ ОСНОВНОГО ТЕКСТА
360: ___ знаков   768: ___ знаков   1440: ___ знаков
что поправили: ___________________________________

УЗКИЙ ЭКРАН, 360
висячие слова: ____   одно слово в последней строке: ____
вылезает за край: ______________________________

ШРИФТЫ
пара: ____________ + ____________
роли: _______________   отличаются: _______________
кириллица проверена в начертаниях: ________________

Часть 2 · Три ширины, 30 минут

1. Откройте экран на 360, 768 и 1440. Если это макет, соберите три фрейма; если сайт — сузьте окно браузера.
2. Посчитайте длину строки основного текста на каждой ширине. Если на широком экране больше 90 знаков, ограничьте ширину текстового блока.
3. Пройдите список из раздела 6 на ширине 360 и поправьте найденное неразрывными пробелами или текстом.

Часть 3 · Шрифты, 15 минут

1. Если шрифтов два, запишите роль каждого, чем они отличаются и что общего. Если объяснение не складывается, попробуйте обойтись одним семейством.
2. Проверьте кириллицу по списку из раздела 8 в каждом начертании, которое есть на экране.

Что должно получиться

• Экран после правок на трёх ширинах.
• Заполненная карта правок с правилом у каждой правки.
• Решение про тире в диапазонах — одно на продукт.

План работы: 20 минут на корректуру, 30 на три ширины, 15 на шрифты. Всего — чуть больше часа.

Частые сложности

• «Текст приходит из системы, правлю не я». Выпишите правки всё равно и отдайте тому, кто пишет тексты или настраивает типограф. Карта правок — готовое задание.
• «В Figma не видно неразрывных пробелов». Их не видно нигде. Проверяйте результатом: сузьте фрейм и посмотрите, где рвутся строки.
• «У нас везде дефис в диапазонах, так привыкли». Замените на выбранное тире сразу во всех местах. Если поправить один экран, появится разнобой.
• «Длину строки не удержать, колонка задана сеткой». Текст может занимать не всю колонку: абзац уже, таблица и картинка шире.

Текст набран, если

• Кавычки — ёлочки, внутри них лапки
• Между частями предложения — тире с пробелами, в составных словах — дефис
• Диапазоны — тире без пробелов, одно на весь продукт
• Отрицательные числа — с минусом
• Число привязано к единице и знаку валюты
• Короткие слова не остаются в конце строки, тире не начинает строку
• Основной текст держит 45–90 знаков в строке на всех ширинах
• На 360 ничего не вылезает за край
• У каждого шрифта своя роль, кириллица проверена

Что мешает

• Прямые кавычки. Попадают из любого текста, набранного наспех.
• Дефис на месте тире и минуса. На клавиатуре нет ни того, ни другого.
• Разнобой в диапазонах. Короткое тире на одном экране, длинное на другом, дефис на третьем.
• Висячие предлоги. Не видны на широком макете и вылезают на телефоне.
• Строка на весь экран. На ноутбуке абзац в 150 знаков.
• Пара без ролей. Два шрифта встречаются в одной роли.
• Кириллица по витрине. Шрифт выбрали по латинице.

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

• § 62. Экранная типографика, § 97. Тире, минус и дефис и § 158. Короткое тире«Ководство» Артемия Лебедева, 2000–2009 · на русском · бесплатноКавычки, неразрывные пробелы и висячие слова на экране (§ 62, 2000), чем дефис отличается от минуса и тире (§ 97, 2003) и почему Лебедев ставит в диапазонах короткое тире (§ 158, 2009). Советы по HTML в § 62 устарели.
• Короткое или длинное тире?Советы Бюро Горбунова, Максим Ильяхов, 2022 · на русском · бесплатноПочему в русских диапазонах ставят длинное тире — по Мильчину, у которого среднего тире нет вовсе, — и когда можно взять среднее: если записать это правилом для всего издания. Ответ Максима Ильяхова 2022 года.
• Мильчин говорит, что разряды в числах нужно отделять пробелом. Как правильно?Советы Бюро Горбунова, Артём Горбунов, 2017 · на русском · бесплатноКогда разбивать четырёхзначные числа: что говорят Гиленсон, Мильчин и «Ководство» и почему в тексте «3000», а в таблице «3 000». Там же — почему пробел для разрядов можно сделать вдвое уже. Совет 2017 года.
• Pairing typefacesGoogle Fonts Knowledge, Эллиот Джей Стокс · на английском · бесплатноНужен ли второй шрифт — четыре случая, когда да, от смены контекста до нехватки знаков другого языка, — и как выбрать пару «достаточно разную, но не слишком»: родство шрифтов по Хише и совет Санта-Марии брать антикву с гротеском.
• Шрифты с кириллицей: что взять бесплатно в 2026 годуПодборка DesignStack · на русском · бесплатноСемь бесплатных гарнитур под OFL с полной кириллицей — Inter, Onest, Manrope, Golos Text, Unbounded, JetBrains Mono, Noto, — где искать остальные и чем проверить шрифт. Кириллицу и знаки продукта всё равно проверьте по разделу 8.