Сделали шрифт, который сам ставит правильные тире, кавычки и не только
Таким шрифтом дизайнеры смогут набирать текст и не волноваться о микротипографике.
Многие дизайнеры и редакторы знают, чем тире отличается от дефиса, а типографские кавычки от программистских — об этом заботятся в том числе правила грамматики и справочник Мильчина.
Проблема в том, что «правильные» типографские знаки не входят в ASCII и не всегда удобно набираются с клавиатуры. Например, в Windows набрать тире или кавычки можно только на клавиатуре, у которой справа есть numpad, или в Ворде с помощью юникодных номеров и Alt + x, или если установить типографскую клавиатурную раскладку Ильи Бирмана.
Длинные тексты перед публикацией есть смысл пропускать через типограф (например, на сайте студии Лебедева).
Некоторые приложения и операционные системы (например, MacOS, iOS и Figma) автоматически заменяют двойной вертикальный штрих на кавычки при включенной настройке Smart Quotes. Правда, после этого набрать «диагональ 17"» становится довольно трудно, а в Фигме кавычки не настраиваются — это всегда английские “верхние лапки”.
Поэтому мы решили в порядке эксперимента встроить микротипограф прямо в шрифт — причём так, чтобы он учитывал контекст, а не менял всё подряд.
Hint — геометрический гротеск с огромным количеством альтернативных знаков, которые полностью меняют характер шрифта.
Название Hint — с английского «инструкция» или «подсказка» — дало идею сделать шрифт умным. Как раз тогда мы обсуждали разработку собственного типографа для веба, собирали таблицы замен и первые прототипы. Этот проект пока не реализовался, но мы решили научить микротипографике Хинт.
Что такое микротипограф
Микротипограф — программный код плюс набор правил типографики, который хранится прямо в шрифте и включается как стилистический сет OpenType. Он может распознавать некоторые сокращения и контекст, «на лету» заменяет часть символов и придаёт тексту более сбалансированный и грамотный с точки зрения типографики вид.
Разработкой микротипографа занимались дизайнеры и технологи Паратайпа: Николай Недашковский, Константин Кунарёв и Александра Королькова.
Хотим сказать большое спасибо Юлии Атановой за сбор правил и сокращений для контекстных замен в типографе. Без Юлиной подборки возможности микротипографа были бы гораздо беднее :)
Подписывайтесь на наш телеграм-канал. Там мы рассказываем о типографике и новых шрифтах.
Что может микротипограф (и чего не может)
✅ Микротипограф может:
- поменять кавычки и тире на правильные;
- удалить двойные пробелы и точки;
- убрать пробел перед точкой;
- выставить индексы и другие неалфавитные знаки (например, может сам сделать из м2 — м², а из (с) знак копирайта ©);
- верно добавить или убрать пробелы в сокращениях
- и многое другое.
❌ Микротипограф не может убрать «висячие предлоги» или поставить в тексте, набранном латиницей, немецкие или французские кавычки, потому что возможности OpenType не безграничны.
Шрифт не может самостоятельно определить язык текста или отследить, где заканчивается строка, а записанную внутри шрифтового кода замену пробела на неразрывный пробел язык html «не понимает». А ещё микротипограф не будет работать в Powerpoint и других средах, где в принципе нельзя включить OpenType.
Важное примечание: микротипограф меняет только отображение текста, но не редактирует сам текст (в отличие от «стационарного» типографа). Это не столько поиск и замена, сколько смена отображения знака в зависимости от контекста: так работает OpenType. И вот почему на самом деле это скорее хорошо, чем плохо:
- Свойства OpenType в первую очередь были сделаны для письменностей типа арабской, когда грамматически буква одна и та же, а графически форма должна меняться в зависимости от положения в слове.
- «Стационарный» типограф работает разово, по нажатию кнопки, а OpenType подменяет знаки в режиме реального времени в динамике в контексте. Кажется, если бы он делал жёсткие замены в исходном тексте, а потом бы контекст менялся, то софт начинал бы сходить с ума…
- В шрифте можно прописать что угодно, например, замену —> на стрелку (кстати, мы так и сделали). Если такая замена сработает в исходном тексте, то при смене шрифта на шрифт без стрелочек в составе мы получим пустое место или знак .notdef (квадратик «тофу») — уж лучше уродливый текст, чем потеря смысла.
- Если мы запрограммируем неправильную замену, ошибки не пойдут дальше!
Микротипограф нельзя рассматривать как полноценную замену «стационарным» типографам и критическому мышлению. Это скорее подстраховка и дополнительный комфорт для дизайнеров, которые ценят микротипографику.
Когда микротипограф будет полезен
- Вы собираете макет в Фигме и у вас много мелких текстовых блоков, которые не хочется каждый раз пропускать через сайт-типограф. Можно один раз создать стиль со включенным микротипографом и не беспокоиться о тире, кавычках, квадратных метрах и знаке умножения.
- Надо быстро собрать лендинг, а редакторы и разработчики не слышали про типографику. Можно включить микротипограф через CSS: { font-feature-settings: "ss19"; } и получить текст на сайте с человеческими тире и кавычками, не прилагая никаких усилий, кроме добавления в стиль этой строчки.
- У вас очень много мелких веб-страниц (например, карточек товаров) и нет ресурса прогонять тексты через типограф. Меняем шрифт на Hint, включаем микротипограф в CSS.
А вот для программистов микротипограф не просто бесполезен, а даже вреден: в коде нужны именно «программистские кавычки» и пробелы перед знаками препинания, а слишком умный шрифт — не нужен!
Как включить микротипограф и что настроить в Adobe и Figma
Микротипограф реализован как стилистический сет в рамках OpenType, включается там же, где и другие стилистические сеты, и работает в любой среде, которая поддерживает возможности OpenType.
В Adobe Indesign: «бутерброд» справа на верхней панели → OpenType → Stylistic sets.
В Figma: в Type → Details.
В CSS с помощью { font-feature-settings: "ss19"; }.
Подробные объяснения работы типографа и способов включения, а ещё тестер типографа здесь
Тестовый текст, чтобы оценить возможности микротипографа
Поместите текст или его часть в тайп-тестер, справа в окошке OpenType выберите Stylistic Set 19 и посмотрите, что произойдёт.
И "Latin", и "кириллица" — это два алфавита, используемых для записи текста. Получив к.г.н. или к.г.-м.н., он был приятно удивлен. Он приехал ж.д. сообщением. Температура 10°C была нормальной. Мы — да. P.S. This was и P.P.S. And that was. П. Stivenson и P.P.Stivenson. R.V. Stivenson и R. Stivenson. И.О. Фамильев и И. Фамильев. Около 88% или 88‰ было зафиксировано. Статья №21 главы была важной. Итоги этого 10-го что-то значили. Т.д. даже 10 млн рублей. 10 тыс. ₽ или 20 млн ₽. Текст XX гл. будет представлен. ДА — ЭТО. Данные а·в обозначают что-то важное. Более 10 а//м напряжения. (c) Автор фото. Более €10 долгу — это правильно. Год 10 н. э. или 10 до н.э. 2024 г. или MMXXIV г. 88 кгм3. Он сказал! Это было интересно.
Что дальше?
Теперь мы будем наблюдать за жизнью Хинта после релиза: станут ли дизайнеры и разработчики использовать микротипограф, насколько это будет удобно и что мы пропустили в коде и правилах. Если проект выйдет за рамки «интересный концепт, но никто им не пользуется», то попробуем адаптировать этот код для других шрифтов, например, для бесплатного Golos, чтобы расширить аудиторию тестирования.
Попробуйте и поделитесь впечатлением!
Задумка классная, но как по мне, если ты часто пишешь тексты, то самое оптимальное решение — раскладка Бирмана. Потому что так ты можешь соблюдать все правила типографики на любом шрифте.
Ваша задумка крута, если не хочется парить голову всеми этими правилами. Посмотрим, что их этого выйдет — держите в курсе по развитию проекта)
да, поэтому про неё в самом начале статьи)
но некоторые знакомые арт-директора жалуются, что у них джуны и разработчики не ориентируются в микротипографике, для таких случаев как подстраховка микротипограф может оказаться удобнее
1 момент — классная идея для тех, кто не использует символы на постоянке и идет в гугл, чтобы скачать нужные кавычки
2 момент уже не к вам — как же расстраивает то, как vc пердолит все вложения к статьям по качеству( если кейс выложен на какой-то ещё площадке, было бы интересно всё порассматривать
именно кейс ещё не выложили, будет на днях)
но есть статья с картинками и полным разбором стилистических сетов: https://info.paratype.ru/hint/ (у нас пока шаблон на сайте не самый удобный, поэтому крупно картинки приходится открывать правым кликом)
Не совсем понятно - получается что это работает только на одном шрифте - "хинте"?
То есть я не смогу набрать, например текст этим шрифтом c правильными знаками и отображением, а потом прыгнуть на согласованный шрифт.
В таком случае - задумка хорошая, но довольно нишевая, т.к. зачастую при работе шрифты заранее согласуются
Пока только в одном шрифте, да — нельзя же щёлкнуть пальцами и огромный кусок кода появится во всех шрифтах сразу)
Хинт достаточно универсальный, поэтому мы на его примере посмотрим, насколько вообще интересна эта тема и может ли микротипограф быть аргументом при выборе шрифта. Следующим шагом попробуем его встроить в Golos — это бесплатный шрифт, там ссылка выше — тоже посмотрим на реакцию и посмотрим, сколько времени и сил уйдёт на адаптацию кода к другому шрифту. И тогда будем делать выводы: сказать «Было интересно, но не востребовано» или распространять типограф на какую-то значимую часть библиотеки Паратайпа.
для дизайнеров решение отличное , не будут заморачиваться над пунктуацией , микротипограф решит проблематичный вопрос