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

Пока типографика — привычка одного человека, каждый новый экран зависит от того, кто его делает.

Через полгода работы втроём в макетах магазина нашлось девять кеглей вместо пяти, три варианта тире в диапазонах и два способа писать цены.

Никто не ошибался нарочно: каждый держался своей памяти о правилах.

Система нужна, чтобы на вопрос «какой здесь кегль» отвечал документ. Автор шкалы может быть в отпуске.

В типографической системе пять частей:

1. Шкала и роли: имена стилей, значения и когда какой ставить.
2. Правила набора: кавычки, тире, пробелы, числа — решения, принятые один раз на весь продукт.
3. Особые случаи: таблицы, длинные названия, второй язык.
4. Шрифты и лицензии: что куплено, на что и где им можно пользоваться.
5. Изменения: кто решает и как новая строка попадает в систему.

Имя стиля живёт дольше его значения, поэтому имя говорит о роли.

Имя-число удобно, пока значение не меняется. У GOV.UK шаг «80» на телефоне даёт 53 пикселя, и это надо помнить.

В шестой версии GOV.UK Frontend шкалу пересобрали: шаг 14 убрали, текст на малых экранах увеличили. Имя по роли, например body или title-m, такие перемены переносит: меняется значение, имя остаётся.

Для разработчика шкала — это таблица: имя, кегль, межстрочный, вес, роль и где стиль ставить нельзя.

Столбец «Где нельзя» отвечает на вопрос «а можно здесь взять вот этот?». Без него стиль выбирают по размеру: сноску 12 ставят под кнопку, потому что «туда влезает только 12».

В коде

Atlassian хранит типографику токенами на всё свойство font сразу и задаёт кегль и межстрочный в rem. От rem зависит, увеличится ли текст, когда человек поднимет размер шрифта в браузере. По WCAG текст должен увеличиваться до 200 % без потери содержимого.

/* Типографика магазина — те же имена, что у стилей в макете */
:root {
  --font-sans: "Гротеск", system-ui, sans-serif;

  --text-display:     700 2rem/2.5rem var(--font-sans);        /* 32/40 */
  --text-title-l:     700 1.5rem/2rem var(--font-sans);        /* 24/32 */
  --text-title-m:     700 1.25rem/1.75rem var(--font-sans);    /* 20/28 */
  --text-body:        400 1rem/1.5rem var(--font-sans);        /* 16/24 */
  --text-body-strong: 600 1rem/1.5rem var(--font-sans);        /* 16/24 */
  --text-body-s:      400 0.875rem/1.25rem var(--font-sans);   /* 14/20 */
  --text-caption:     400 0.75rem/1rem var(--font-sans);       /* 12/16 */
}

h1          { font: var(--text-title-l); }
.price      { font: var(--text-title-m); font-variant-numeric: tabular-nums; }
.card-title { font: var(--text-body-strong); }

/* Т7: цифры в таблицах моноширинные и по правому краю */
.price-table     { font: var(--text-body-s); font-variant-numeric: tabular-nums; }
.price-table .num { text-align: right; }

В Figma

Каждая строка таблицы — текстовый стиль с тем же именем.

Внутри стилей можно использовать переменные:

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

Две оговорки из справки Figma: вес в переменной задаётся только числом — 400, 700, — а трекинг читается в пикселях, не в процентах.

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

У каждого правила — номер. На номер можно сослаться в ревью, и спорят уже о правиле.

Шрифт — программа, и пользоваться им можно так, как разрешает лицензия. Бесплатный не значит «можно всё», купленный — не значит «можно везде».

Открытые шрифты

Открытые шрифты чаще всего выходят под SIL Open Font License, OFL: в Google Fonts под ней выходит большинство шрифтов. Что она разрешает и запрещает:

• Можно: использовать, изучать, менять и распространять шрифт, встраивать в приложения и документы и подключать на сайтах, в том числе в коммерческих продуктах.
• Нельзя: продавать сам шрифт отдельно. Продавать продукт, в который он встроен, можно.
• Зарезервированное имя. Если автор объявил Reserved Font Name, изменённую версию нельзя выпускать под этим именем без его письменного разрешения. Объявлять такое имя автор не обязан.
• Документы свободны. Требования лицензии не распространяются на документы, созданные этим шрифтом.

Все шрифты Google Fonts открытые и бесплатные: большинство под OFL, часть — под Apache и Ubuntu Font License. В их FAQ сказано, что шрифтами можно пользоваться на любых носителях, в том числе коммерчески, а файлы можно разместить на своём сервере. PT Sans, PT Serif и PT Mono от ParaType тоже распространяются под OFL, а PT Sans Pro — уже нет.

Коммерческие шрифты

Коммерческий шрифт покупают не «вообще», а для определённого применения. Типы лицензий у ParaType:

У ParaType все пять лицензий бессрочные, оплата разовая. На MyFonts набор похожий, а веб-шрифты многие студии продают по годовой лицензии с лимитом просмотров. Настольная лицензия ParaType прямо запрещает показывать шрифтом текст на сайте: для этого нужна веб-лицензия. У ParaType можно платить в рублях — подробности в карточке каталога.

В обычном тексте цифры разной ширины. В столбце из-за этого разряды не стоят друг под другом.

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

В CSS моноширинные включает font-variant-numeric: tabular-nums — это функция шрифта tnum. Если в шрифте её нет, свойство ничего не изменит, поэтому шрифт для таблиц проверяют заранее.

Бывает, что функция есть, но выравнивает не все цифры.

У Golos Text версии 2.004 — им набран этот сайт — tnum доводит до ширины нуля только 1, 4 и 7. А 2, 3, 5, 6, 8 и 9 остаются своей ширины.

Поэтому в примере ниже тысячи в столбце «Остаток» и с моноширинными цифрами расходятся на пиксель-полтора.

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

Когда числа форматирует код

Суммы и остатки в оптовом разделе приходят из базы, и пробелы в них расставляет не дизайнер, а код.

Intl.NumberFormat('ru-RU') отбивает разряды неразрывным пробелом и знак рубля тоже ставит через неразрывный: «11 480,00 ₽», а без копеек — с настройкой maximumFractionDigits: 0. Две детали стоит записать в систему:

• Четырёхзначные числа он тоже разбивает: «1 234». Для таблиц это то, что нужно по Т7. В сплошном тексте правило набора разрешает «1234», но разнобой хуже: проще принять формат кода везде.
• Отрицательное число выходит с дефисом: «-300». Если в системе минус, как в Т8, его подставляют в коде отдельно.

Результат зависит от версии движка: примеры проверены в Node 24. Проверьте формат в своём продукте.

Макет рисуют с удобными текстами. Продукт получает любые.

Длинные названия

«Колумбия Супремо Уила, зерно, обжарка под эспрессо, 1 кг» в карточке каталога не поместится ни в одну, ни в две строки.

Правило должно заранее сказать, что тогда делать. Обычно выбирают одно из трёх:

• Перенос без ограничений. Честно, но карточки в ряду выходят разной высоты.
• Ограничение по строкам с многоточием. В одну строку — text-overflow: ellipsis вместе с overflow: hidden и white-space: nowrap. В несколько — -webkit-line-clamp, который работает только вместе с display: -webkit-box и -webkit-box-orient: vertical.
• Сокращение текста на стороне того, кто его пишет: короткое название для карточки, полное — для страницы товара.

Второй язык

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

• Кавычки: в английском тексте “…” и ‘…’, как в «Ководстве».
• Числа: разряды отбивают запятой, дробную часть — точкой: 12,000 и 11,999.99. В русском наоборот: 12 000 и 11 999,99. Так отвечает Бюро Горбунова в совете «В каком формате писать числа разрядностью больше трёх?».
• Длина строк меняется. «Корзина» становится «Shopping cart», «Оформить» — «Checkout». Кнопки, вкладки и заголовки проверяют на самой узкой ширине в обоих языках.
• Шрифт. Если второй язык на другой письменности или с особыми буквами, шрифт проверяют на них во всех начертаниях, как кириллицу в уроке Middle.

С системой замечание звучит так: «Т1: кегль 18 не из шкалы, нужен text-body-strong». Без неё — «мне кажется, крупновато».

Порядок проверки

1. Стили. Пройдите текстовые слои. Если у слоя в правой панели Figma стоит имя стиля — он в шкале. Если значения вместо имени, это первый кандидат на нарушение Т1.
2. Роли. Стиль из шкалы может стоять не на своём месте: сноска под кнопкой, заголовок раздела в ячейке таблицы.
3. Набор. Корректура из урока Middle: кавычки, тире, пробелы, числа.
4. Особые случаи. Самое длинное название, таблица, английская версия, ширина 360.
5. Разделите находки на три вида: нарушение системы, не ошибка и случай, который система не покрывает. Последнее — не вина автора макета, а задача для системы.

Коллега собрал экран оптового прайса. Ниже восемь замечаний с ревью.

Решите для каждого, что это, опираясь на строки системы из раздела 4.

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

• Сменился шрифт. У разных шрифтов при одном кегле разная высота строчных букв и ширина знаков. Тот же 16 может выглядеть крупнее или мельче, а строка вмещает другое число знаков. Прогоните все стили, длину строки и межстрочные заново, проверьте кириллицу и лицензию.
• Появился раздел с другими задачами. Статьи о кофе потребовали антикву и длинный текст, оптовый раздел — плотные таблицы. Проверьте, хватает ли ролей, или нужна новая.
• Появилась платформа. Приложение, печать, почтовые рассылки. У каждой свои ограничения, как у чека из тренажёра.
• Повторяется «система не покрывает». Если один и тот же случай всплыл в третьем ревью, это уже не исключение.

Так поступил GOV.UK: в шестой версии Frontend шкалу пересобрали — убрали шаг 14, увеличили текст на малых экранах — и описали изменения на отдельной странице.

Как вносить изменение

1. Предложение коротко: какой случай, почему текущая строка не подходит, что предлагается.
2. Проба на трёх настоящих экранах, включая самый плотный и самый текстовый.
3. Новая версия системы с датой и списком изменений.
4. Замена в библиотеке стилей и в коде одновременно, иначе макет и продукт разойдутся.

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

Часть 1 · Система, 60 минут

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

ТИПОГРАФИКА · ПРОДУКТ: ______________   Версия: __  Дата: __.__.____
Кто отвечает: ______________   Как предложить правку: ______________

1. ШКАЛА И РОЛИ
   стиль        | кегль/межстр. | вес | роль                  | где нельзя
   ____________ | __ / __       | ___ | _____________________ | ____________
   ____________ | __ / __       | ___ | _____________________ | ____________
   ____________ | __ / __       | ___ | _____________________ | ____________
   Единицы в коде: rem / px     Имена в коде совпадают с макетом: да / нет

2. ПРАВИЛА НАБОРА
   Т_  кавычки: ________________________________
   Т_  тире в диапазонах: короткое / длинное
   Т_  неразрывный пробел: ______________________
   Т_  отрицательные числа: ____________________

3. ОСОБЫЕ СЛУЧАИ
   Т_  числа в таблицах: ________________________
   Т_  длинные названия: ___ строк, дальше ______, полный текст — ______
   Т_  второй язык: ____________________________

4. ШРИФТЫ И ЛИЦЕНЗИИ
   шрифт | лицензия | на что куплена | лимит | где лежит файл лицензии
   _____ | ________ | ______________ | _____ | ______________________

5. ИЗМЕНЕНИЯ
   Поводы: смена шрифта / новый раздел / новая платформа / повтор в ревью
   Предложение → проба на трёх экранах → версия → замена в стилях и коде

Часть 2 · Лицензии, 15 минут

1. Для каждого шрифта найдите лицензию и запишите, на что она позволяет его использовать.
2. Сверьте с тем, где шрифт стоит сейчас: сайт, приложение, рассылки, документы. Каждое расхождение — отдельная строка.

Часть 3 · Два чужих макета, 30 минут

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

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

• Документ системы по шаблону, на одну-две страницы.
• Таблица шрифтов и лицензий с расхождениями, если они есть.
• Разбор двух макетов: находки с номерами строк и видом.

План работы: 60 минут на систему, 15 на лицензии, 30 на разбор. Всего — около двух часов.

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

• «Стилей в продукте уже тридцать». Не удаляйте сразу. Сведите их к ролям на бумаге, а переход запланируйте отдельной задачей, как GOV.UK с новой шкалой.
• «Не могу найти, какая у шрифта лицензия». Это находка сама по себе. Запишите её и выясните у того, кто покупал шрифт, или у студии.
• «В чужом макете всё нарушено». Проверьте, знал ли автор о системе. Если нет, начните с того, чтобы показать систему. Разбор подождёт.
• «Разработчики называют стили по-своему». Договоритесь об одном списке имён и впишите его в шаблон. Имя в макете и в коде должно совпадать.

Система работает, если

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

Что мешает

• Имена-числа. Шкала меняется, имена врут.
• Стили без «где нельзя». Сноску ставят под кнопку, потому что «влезает».
• Шрифт без лицензии в системе. Через год никто не знает, можно ли взять его в приложение.
• Пропорциональные цифры в таблицах. Разряды гуляют.
• Обрезка без полного текста. Название не прочитать нигде.
• Замечания без номера строки. Ревью превращается в спор о вкусе.
• Система без пересмотра. Её начинают обходить.

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

• Type scale tokensMaterial Design 3 · на английском · бесплатноКак Material 3 устроила имена и токены: роль и размер в имени, один составной токен на стиль и отдельные — на шрифт, кегль, межстрочный, трекинг и вес. Там же — базовый и акцентный наборы и высота строки для разных письменностей.
• TypographyAtlassian Design System · на английском · бесплатноШкала Atlassian с именами-размерами от xxlarge до xxsmall: кегли и межстрочные в rem и px, когда какой заголовок и текст ставить. Что токен хранит всё свойство font целиком, видно в справочнике токенов, раздел All tokens.
• Type setsIBM Carbon Design System · на английском · бесплатноДва набора стилей IBM: продуктовый с базой 14 и выразительный с базой 16. Как их различают суффиксы -01 и -02 и чем фиксированные заголовки отличаются от плавающих, которые растут с шириной экрана.
• Type scale и Using the updated type scaleGOV.UK Design System · на английском · бесплатноШкала GOV.UK: точки-числа от 16 до 80 рядом с классами по ролям, значения для больших и малых экранов, и что изменилось в Frontend 6.0.0 — точку 14 убрали, текст на телефонах увеличили.
• SIL Open Font License и OFL-FAQSIL International · на английском · бесплатноТекст OFL 1.1 и официальный FAQ: что разрешено при встраивании, продаже и изменении шрифта, как работают зарезервированные имена и почему урезанный шрифт для сайта уже считается изменённой версией. FAQ длинный, раздел 2 — про веб.