Что общего у Hint и кашемирового свитера — всё о новом геометрическом гротеске


Тайп-тестер
Hint — универсальный геометрический гротеск, комфортный в применении и с неуловимым оттенком «тихой роскоши». Одинаково хорошо работает в айдентике, наборе длинного текста и в навигации.

шрифт Hint

Диапазон
начертаний
Thin Extra Bold
Italic Thin Italic Extra Bold

Знаковый
состав
Аа Бб Вв Гг Дд Ёё Жж Фф
Стандартная кириллица
«АЯ» «a—z» 12:00 н:н
Регистрозависимая пунктуация
0123456789
Минускульные цифры
012345 012345
Пропорциональные и табличные цифры
⁰¹²³⁴⁵12345₀₁₂₃₄₅
Верхние и нижние индексы
123¼½¾⅛⅜⅝⅞‰
Дроби
Аааа ЖжЖж ЗзЗз
Альтернативные знаки
→↑←↓↔ →↑←↓↔
Стрелки и неалфавитные символы
Ғғ Җҗ Ҙҙ Ҝҝ Ӝӝ Ӌӌ Ӳӳ
Расширенная кириллица
Ѣѣ Ѳѳ Ѵѵ
Историческая кириллица
Ãã Øø ẞß Ăă Ęę Ţţ Ůů Ďď
Расширенная латиница
Áа́ Е`е´ И`и´ О́о` У`у` Ы`ы` Э`э́
Гласные с ударениями

Шрифт Hint

Особенности дизайна

Hint как кашемировый свитер. Сочетает в себе комфорт, внутреннюю правильность и практичность. Если кашемировый свитер надеть на прогулку, в нём будет удобно и тепло. При этом на фотосессии или вечеринке он тоже будет абсолютно уместен. Таким же мы сделали Hint: он выгодно подчёркивает любой дизайн и придаёт набору ощущение тихой роскоши.

шрифт Hint

шрифт Hint
Hint в журнале авиакомпании, дизайнер Василий Бирюков

Как и кашемировый свитер, Hint подстраивается под ситуацию. Достаточно правильно выбрать контекст — болотные сапоги и тёплый шарф или нарядную обувь и аксессуары. А в случае Hint — просто переключить стилистические сеты и получить шрифт для айдентики, характерных заголовков или длинного текста.

Изабелла Чаева:

«Работаю над курсивами к Хинту. Мне нравится идея этого шрифта! Образ гармоничный и как будто простой, однако линии и пропорции очень изысканные. Курсивы будут несколько зауженные и, думаю, будут интересно смотреться в сочетании с прямыми начертаниями»

Изабелла Чаева
шрифт Hint

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

Hint в магазине

Как использовать

Хинт в его базовой версии подойдёт, когда нужен качественный геометрический гротеск без лишних отсылок. Шрифт в меру артистичный, в меру прагматичный, ровный по ритму и с широкой линейкой начертаний.

Линейка начертаний Hint

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

Александра Королькова:

«Мне хотелось сделать по-настоящему универсальный и удобный шрифт, который будет хорошо работать и в книге, и в презентации, и в логотипе. Знаковый состав должен быть достаточным, чтобы не нужно было искать, например, стрелки или капитель в другом шрифте, но и не настолько огромным, чтобы в нём запутаться. И, как в любом спокойном шрифте, напрашивались альтернативные знаки, чтобы в любой момент можно было добавить в шрифт характера и превратить его из нейтрального в очень выразительный. Сейчас я пользуюсь Хинтом в своих презентациях и в макете новой версии «Живой типографики» в сочетании с Circe Slab и Helsa. Мне удобно :)»

Александра Королькова

Техническая деталь: по высоте Hint совпадает с San Francisco, так что с ним можно поэкспериментировать в дизайне приложений и попробовать в макете другую стилистику, не меняя кегля и интерлиньяжа.

Сочетание с другими шрифтами: Hint сочетается с широкими текстовыми антиквами, особенно с Circe Slab или Schoolbook New, а также с нейтральной классикой в лице ITC Charter, Newton или Bodoni PT, и с узкими акцидентными шрифтами — от Spile и Pragmatica Next Compressed до Helsa Display.

Hintpairing1
Hintpairing3
Hintpairing2

Микротипографика

В Hint есть микротипограф, который встроен прямо в шрифт и включается так же, как стилистические сеты.

Николай Недашковский:

«Название Hint — инструкция или подсказка — дало идею сделать шрифт умным. Как раз тогда мы с Юлией Атановой обсуждали разработку собственного типографа для веба, который был бы лучше тех, что есть на рынке, и собирали первые прототипы. Этот проект так и не реализовался, и мы с Сашей Корольковой решили научить Хинт микротипографике. Но без Юлиного импульса, тестовых слов, табличек правил и сокращений, Хинт точно бы учился правилам микротипографики гораздо дольше»

Николай Недашковский

Включите Stylistic Set 19 в OpenType. Посмотрите, как работает микротипограф.

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

  1. поменять кавычки и тире на правильные;
  2. удалить двойные пробелы и точки;
  3. убрать пробел перед точкой;
  4. выставить числители, знаменатели, индексы и так далее (например, может сам сделать из м2 — м², а из (с) знак копирайта);
  5. верно добавить или убрать пробелы в сокращениях и многое другое.

Микротипограф не может убрать «висячие предлоги» или поставить в тексте, набранном латиницей, немецкие или французские кавычки — всё-таки возможности OpenType не безграничны. А ещё он не будет работать в Powerpoint — там в принципе нельзя включить OpenType. Поэтому его нельзя рассматривать как полноценную замену «стационарным типографам» и критическому мышлению.

Но вот в каких случаях он будет полезен:

  1. Вы собираете макет в Фигме и у вас много мелких текстовых блоков, которые не хочется каждый раз пропускать через сайт-типограф. Можно один раз создать стиль со включённым микротипографом и не беспокоиться о тире, кавычках, квадратных метрах и знаке умножения.
  2. Надо быстро собрать лендинг, а редакторы и разработчики не слышали про типографику. Можно включить микротипограф через CSS — параметр {font-feature-settings: ′ss19′;} и получить текст на сайте с человеческими тире и кавычками, не прилагая никаких усилий.
  3. У вас очень много мелких веб-страниц (например, карточек товаров) и нет ресурса прогонять тексты через типограф. Меняем шрифт на Hint, включаем микротипограф в CSS.

Микротипограф будет работать в любой среде, которая поддерживает возможности OpenType и конкретно — стилистические сеты. Это не магия, но для дизайнера, который ценит микротипографику, Hint сделает работу более комфортной.

Шрифт Hint

Стилистические сеты

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

Сет 01: Одночастная буква а (One-storey a)

Сет 01

Меняет строчную двухчастную «a» в кириллице и латинице на одночастную.

Сет 01 One-storey a работает для всех вариантов буквы, например, для «a» с диакритикой или c ударением.

Двухчастную букву «а» можно увидеть в классической книжной типографике. Она добавляет шрифту человечности и традиционности.

Одночастная «а» появилась в 1920-е годы в подчёркнуто геометрических гротесках вроде Футуры. Она заставляет набор выглядеть более лаконично и отстранённо.

Сет 02: Скучная Kk (Boring Kk)

Сет 01

У строчной и прописной k появляется горизонтальная площадка в середине. Это делает букву более уравновешенной в мелком кегле: этот вариант конструкции Кк ближе всего к варианту «по умолчанию».

Этот сет меняет и другие буквы, в которых есть те же горизонталь и угол. Например, кириллические «Кк» и «Жж».

Строчные «к» и «ж» с горизонтальной перемычкой выглядят спокойно и обычно, а вот в прописной мы добавили брутальности: сделали горизонталь чуть шире, чем она нужна просто для оптической компенсации. Поэтому сет 02 — хороший выбор для тех, кто хочет видеть Hint чуть более суровым.

Сет 03: Закрытые круглые знаки (Grotesque Round)

Сет 01

Делает круглые знаки закрытыми, как в старых гротесках (это группа гротесков конца XIX – начала XX веков). Набор с закрытыми круглыми знаками резко меняет характер: он перестаёт быть нейтральным и становится очень характерным, местами даже нахальным.

Стилистические сеты в Hint затрагивают не только базовые буквы, но и акцентированные, и капительные, и неалфавитные знаки: например, ss03 меняет ещё форму цифр и стрелок.

Такой сет пригодится тому, кто хочет добавить деталей спокойному тексту и привлечь внимание. Закрытость знаков заведомо снижает практичность шрифта, зато может работать как голос и интонация: «я могу позволить себе быть не для всех, не самым удобочитаемым». Если включить только этот стилистический сет (или его в сочетании с круглой «а»), то набор остаётся современным, но приобретает ироническое выражение лица.

Сет 04: Кириллическая «б», как в старых гротесках (Grotesque cyr b)

Сет 04

Меняет вид строчной буквы «б» и делает набор более книжным. Этот сет, особенно в сочетании с закрытыми круглыми знаками, даёт ощущение модной винтажной афиши. Он хорошо сочетается с сетом ниже, которые меняет g в латинице.

Мы осознанно не помещаем все эти знаки в один сет, а раскладываем по одной букве, чтобы дизайнеры могли сами тонко настраивать характер набора. Если включить сразу несколько сетов — например, поменять «б», «к» и g, — то в наборе станет ярко прослеживаться дух старого гротеска XIX века. Но иногда хочется работать на нюансах, и тогда можно включить только один сет и поменять одну букву, а не три сразу.

Сет 05: Строчная g, как в старых гротесках

Сет 05

Этот сет, как и предыдущий, трансформирует один знак — латинскую строчную g — и делает набор более книжным и расслабленным.

Сет 06: Диагонали, как в старых гротесках (Grotesque diagonals)

Сет 06

Этот сет меняет буквы K M R W Ж К М Я и их производные на современное переосмысление графики старых гротесков.

Если включить этот сет отдельно или в сочетании с закрытыми круглыми знаками (но без сетов 07 и 08), то набор превратится в ироничную отсылку к XIX веку.

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

Сет 06

шрифт Hint
Wiener Initialen, 1908. Из книги Type: A Visual History of Typefaces and Graphic Styles, Taschen, том 2 и Reform Grotesk, 1908. Из книги Type: A Visual History of Typefaces and Graphic Styles, Taschen, том 2

Сет 07: «Советская» кириллица (Soviet Cyrillic)

Сет 07

Этот стилистический сет меняет графику «Ии» и «Кк» на более «медленные» варианты: «Кк» с гнутыми ветвями и «составную» форму «И», с более пологой диагональю.

Строго говоря, эти формы букв не такие уж и советские, они появились на рубеже XIX–XX веков в ранних гротесках словолитен Ревильона и Лемана. Но у современного читателя они ассоциируются с гарнитурой Рубленой, советскими книгами и титрами кинофильмов.

Форма «К» — нарочито не-текстовая, широкая и с вертикальными участками ветвей, как в Рубленой.

шрифт Hint
Телингатер С., Каплан Л. Искусство акцидентного набора. Издательство «Книга», 1965

Применять с осторожностью — только там, где хочется получить очень громкий намёк на историю XX века.

Сет 08: Винтажная кириллическая «У» (Grotesque cyr U)

Сет 08

Меняет прописную «У» в кириллице на более «кудрявый» вариант и как будто добавляет набору викторианские усы.

Такую «У» можно включить вместе с закрытыми круглыми знаками, тогда набор будет на грани — то ли уже XIX век, то ли ещё нет.

Сет 09: Короткая f (Short f)

Сет 09

Для плавного набора в шрифте основная форма f автоматически меняется на f с верхней частью, не так сильно выступающей вправо, если она стоит перед высокими знаками (k, i и другими). Но с помощью стилистического сета можно поменять f и в остальных местах — благодаря этому все буквы f станут немного жёстче и брутальнее.

Сет 10: Альтернативная «y» (Straight italic y)

Сет 10

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

В англоязычных текстах такую «y» часто ставят в пару с круглой одночастной a и называют это «детскими формами» — считается, что такие формы знаков детям воспринимать легче. Хотя исследования Сью Уокер и не подтверждают эту гипотезу — в её тесте английские дети лучше всего читали привычный им Gill Sans — но выглядит округлая «у» действительно более мягкой, детской и наивной. А вместе с круглой «а» может создать ощущение выпрямленного курсива.

Сет 12: Треугольные «Дд» и «Лл» (Triangle Cyrillic L D).

Сет 12

Заменяет основные, трапециевидные формы «Дд» и «Лл» треугольными. В мелком тексте их лучше не использовать, потому что так сложнее балансировать текстуру набора, а вот в крупном размере с их помощью можно получить ощущение более строгой и жёсткой геометрии в духе Футуры и Баухауса.

Сеты 13 и 14: цифры в кружочках (Circled numerals и Inversed circled numerals)

Сет 13
Сет 14

Включение стилистического сета 13 заменяет комбинацию (0), (1), (2), …, (9) на соответствующую цифру в контурном кружке, а сет 14 — на цифру в чёрном кружке.

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

Дополнительно: Альтернативные варианты буквы «a»

Сет 14
Сет 15

У латинской и кириллической букв «а» из основного стилистического сета и из сета 03 (Grotesque Round) есть альтернативные формы с «хвостиком».

Эта форма делает набор менее лаконичным и более человечным, а вариант с закрытой формой и «хвостиком» окончательно превращает Hint в старый гротеск. Это уже не столько современная отсылка к XIX веку, сколько почти историческая реконструкция — если нужно создать ощущение действительно старомодного набора, то стоит включить эту форму.

Чтобы альтернативные «а» можно было использовать одновременно с любыми стилистическими сетами, они включаются с помощью Swash (например, в Figma это Type —> Details —> Letterforms —> Swash).

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

Как включать стилистические сеты

Фигма. Всё, что нужно сделать в Фигме, чтобы включить в тексте любой встроенный в шрифт сет — нажать на многоточие в правом нижнем углу панели Text и выбрать вкладку Details.

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

Adobe InDesign. Здесь стилистические сеты, как и микротипограф, включаются так же просто. В меню настроек («бутерброд» на верхней панели справа) выберите OpenType, а внутри него Stylistic Sets, где отметьте нужные сеты. Микротипограф — это Set 19.

Hint-Indesign
Hint-Figma

CSS. В вебе сеты включаются с помощью строчки в CSS. Поскольку в разных шрифтах альтернативные формы разные, то чтобы узнать номер нужного сета, надо смотреть документацию к шрифту. Все стилистические сеты называются по одному принципу — ssXX, где ХХ — номера от 01 до 20, и включаются с помощью параметра {font-feature-settings: ′ss01′}

Примеры:
{font-feature-settings: ′ss01′;} включит круглую букву «а».
{font-feature-settings: ′ss03′;} включит очень закрытые формы всех круглых букв.
{font-feature-settings: ′ss19′;} включит микротипограф.

Примеры
использования








Авторы
шрифта

Александра Королькова

Шрифтовой дизайнер, книжный дизайнер, типограф, теоретик шрифта и типографики. Арт-директор Paratype. Девятый лауреат премии имени Шарля Пеньо, вручаемой ATypI раз в несколько лет дизайнеру до 35 «за выдающийся вклад в шрифтовой дизайн» (2013). Автор книги «Живая типографика» (первое издание — 2007, переиздана в 2008, 2010 и 2012) и некоторого количества статей. Ведущий дизайнер шрифтов PT Sans, PT Serif, Circe, Golos RF и других. Выступала на конференциях ATypI, TYPO Berlin, TypeCon, TYPO Labs, Serebro Nabora, Typofest, Typetersburg, Дизайн-выходные. Шрифты отмечены на международных конкурсах («Современная кириллица 2009», Granshan, ED Awards, Red Dot), член жюри «Современной кириллицы 2014», «Современной кириллицы 2019» и «Современной кириллицы 2021».

Ник Недашковский

Ник Недашковский — шрифтовой дизайнер и шрифтовой инженер. Работает в словолитне «Паратайп». Награжден серебряным каннским львом за упаковку «Океан», Behance Top Russia за годовой отчет РЖД и iF Design Award за шрифт на новых автомобильных номерах, среди наград есть adcr, red apple, среда, white square, принимал участие в проектах, получивших призы на tdc, red dot, графис silver award. Подготовил кириллицу к шрифту, помогающему читать детям с дислексией. Ведет курсы в НИУ ВШЭ. Лектор и куратор технического блока курса шрифта и типографики в школе Тагира Сафаева, соавтор курса в мастерской Димы Барбанеля. Организатор коллаборации TypeImprovisation.xyz.
Выступал на типомании, g8, sber design conf, дизайн выходных, точке зрения, юконе, лектории, skillbox лектории, designline, etc. член оргкомитета конкурса «современная кириллица 21».⠀
Автор шрифтов Helsa Display, Izh260‑t, Izh260‑a, Bodoni PT и многих заказных проектов. разрабатывал шрифты для российской футбольной премьер лиги, платформы Furure London Academy, парка Зарядье, фонда Белый Ирис, площадки «Руками» и других.

Изабелла Чаева

Дизайнер шрифта, художник и каллиграф. Много лет сотрудничает с Паратайпом. Начинала с кириллических версий шрифтов Emigré, FontShop, ITC и Bitstream, работала над расширением состава почти всех ключевых шрифтов Паратайпа. Сейчас в основном рисует оригинальные шрифты и исторические реконструкции — собственные (Reed, Titul, Textbook New) и в соавторстве.