Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

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

2 Изображение: "Живая типографика"Например, на устройствах с ОС Windows набирать тире или кавычки нужно на клавиатуре, у которой справа есть цифровая панель, или в Word с помощью номеров Unicode и сочетания клавиш Alt + X, или с помощью типографской раскладки Ильи Бирмана для клавиатуры.

3 Изображение: "Живая типографика"Некоторые операционные системы (например, macOS, iOS) и приложения (Figma) автоматически заменяют двойной вертикальный штрих на кавычки при включённой функции Smart Quotes. Правда, из-за этого сложно набирать обозначения дюймов (10″), а в Figma кавычки не настраиваются - это всегда английские двойные лапки.

4 Изображение: "Живая типографика"Поэтому появился проект, в котором решили в порядке эксперимента встроить микротипограф прямо в шрифт Hint таким образом, чтобы он учитывал контекст, а не менял всё подряд. Типограф представляет собой программный код в сочетании с набором правил типографики.

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

6 Изображение: "Живая типографика"Разработкой микротипографа занимались дизайнеры и технологи компании ParaType Николай Недашковский, Константин Кунарёв и Александра Королькова, также им помогала Юлия Атанова.

7 Что может микротипограф:

8 <ul><li>поменять кавычки и тире на правильные;</li>

9 <li>удалить двойные пробелы и точки;</li>

10 <li>убрать пробел перед точкой;</li>

11 <li>расставить индексы и другие неалфавитные знаки (например, может сам сделать из "м2" - "м²", а из (c) - знак копирайта ©);</li>

12 <li>верно добавить пробелы в сокращениях или убрать их.</li>

13 </ul>Изображение: "Живая типографика"Микротипограф не может убрать "висячие" предлоги или поставить в тексте, набранном латиницей, немецкие или французские кавычки, потому что возможности OpenType не безграничны. Он сам не определит язык текста и не отследит, где заканчивается строка. Ещё он не понимает записанную внутри шрифтового кода замену пробела на неразрывный пробел. Кроме того, микротипограф не будет работать в PowerPoint и других программах и сервисах, где в принципе нельзя включить OpenType.

14 Изображение: "Живая типографика"Важно понимать, что микротипограф меняет только отображение текста, но не редактирует сам текст (в отличие от "стационарного" типографа). Это не столько поиск и замена, сколько выбор способа отображения знака в зависимости от контекста.

15 И это хорошо, так как свойства OpenType изначально проектировались для письменностей типа арабской, когда грамматически буква одна и та же, а графически форма должна меняться в зависимости от положения в слове. "Стационарный" типограф работает разово, по нажатию кнопки, а OpenType заменяет знаки в режиме реального времени, ориентируясь на контекст.

16 Изображение: "Живая типографика"В микротипографе можно прописать что угодно - например, замену -> на стрелку. Если такая замена сработает в исходном тексте, то при смене шрифта на шрифт без этого символа в составе в итоге получится пустое место или знак .notdef (квадратик "тофу"). Если в микротипографе составить запрос на неправильную замену, ошибки не пойдут дальше.

17 Микротипограф нельзя рассматривать как полноценную замену "стационарным" типографам, это скорее страховка.

18 Изображение: "Живая типографика"Микротипограф будет полезен:

19 <ul><li>Если вы собираете макет в Figma и у вас много мелких текстовых блоков, которые не хочется каждый раз пропускать через сайт-типограф.</li>

20 <li>Если надо быстро собрать лендинг, а редакторы и разработчики не слышали про типографику. Можно включить микротипограф с помощью CSS: { font-feature-settings: "ss19"; } и получить на сайте текст с человеческими тире и кавычками, не прилагая усилий ни к чему, кроме добавления в стиль этой строчки.</li>

21 <li>Если у вас очень много мелких веб-страниц (например, карточек товаров) и нет возможности прогонять тексты через типограф. Меняем шрифт на Hint, включаем микротипограф в CSS.</li>

22 </ul>Изображение: "Живая типографика"Микротипограф включается там же, где и другие стилистические сеты OpenType, и работает в любой среде, которая поддерживает OpenType.

23 <ul><li>В Adobe InDesign: "бутерброд" справа на верхней панели → OpenType → Stylistic sets.</li>

24 <li>В Figma: Type → Details.</li>

25 <li>В CSS: { font-feature-settings: "ss19"; }.</li>

26 </ul>Подробное объяснение работы типографа, инструкции по включению и тестер типографа находятся<a>здесь</a>.

27 Изображение: "Живая типографика"