Гуманистический гротеск для видеоигр.
Для подсказок, которые появляются на экране на секунду — и всё равно должны быть прочитаны.
520x-height (UPM)
60%кривизна
2письменности
1ось насыщенности
25+альтернатив
∞степеней насыщенности
Шрифт, рождённый на экране●A font born on the screen●читаемо в движении●for HUDs, dialog, subtitles, menus●Шрифт, рождённый на экране●A font born on the screen●читаемо в движении●for HUDs, dialog, subtitles, menus●
/01 — Манифест
В игре шрифт читают в движении
Игровая подсказка может быть видна меньше секунды. В это время игрок продолжает управлять персонажем, следить за сценой и считывать интерфейс периферийным зрением. Шрифт для такой среды должен работать не только в идеальных условиях, но и поверх движения, света и шума.
Cognis строится вокруг этой задачи: высокий рост строчных, раскрытые апертуры, различимые цифры, устойчивый ритм строки. В одном файле — ось насыщенности 300–700, латиница с расширениями и кириллица. Все решения подчинены чтению в игровом интерфейсе.
/02 — Задача
Где универсальный гротеск теряет читаемость
Ниже — четыре типовых сценария, из которых выросли требования к Cognis.
Скученность
Подсказки в игре часто набираются около 14 px. На таком кегле сочетания «mi», «il», «ll» у многих гротесков сближаются до набора вертикальных штрихов.
Похожие знаки
Если «1» похожа на «l», а «0» на «O», ошибка возникает уже не в чтении, а в действии: координате, счёте, выборе пункта меню.
Масштаб
Заголовок главного меню и строка «–12 HP» могут использовать одну гарнитуру, но требуют разной плотности и масштаба. Если диапазон не держится, в проект приходится добавлять второй шрифт.
Динамичный фон
Камера движется, фон меняет светлоту и цвет. Подложка помогает, но если каждый текст требует отдельного прямоугольника, интерфейс начинает закрывать саму игру.
272
знака в файле
2
письменности
25+
альтернатив
300→700
ось насыщенности
/03 — Сравнение
Норм — норм
Слева Helvetica — нейтральный системный гротеск, который часто оказывается в интерфейсе по умолчанию. Справа Cognis. Сравнение здесь не про «лучше» или «хуже», а про то, какие формы нужны тексту, который читают быстро и поверх сложного фона.
Helvetica · системный гротеск
Mission failed. Restart from checkpoint?
«i» и «l» в «failed», «i» в «Mission» — близкий вертикальный ритм
«il» в «failed» читается как плотный вертикальный участок
s, e, c с узкими выходами теряют внутренний просвет на блике
читаемость сильнее зависит от контрастной подложки
Cognis · игровой интерфейс
Mission failed. Restart from checkpoint?
«i» и «l» различаются по высоте и форме окончания
«il» сохраняет раздельность внутри слова
раскрытые e, s, c сохраняют внутренний просвет
подложка усиливает чтение, но не становится единственным условием
/04 — Различимость
Пары, в которых важна дистанция
В интерфейсе эти знаки часто встречаются в кодах, координатах, именах игроков и счётчиках. Их форма должна различаться до того, как читатель начнёт всматриваться.
1lIцифра, строчная и прописная не сливаются в один знак
0Oноль и буква сохраняют разные силуэты
qpq и p с разными хвостами, не зеркальная пара
ilti, l и t различаются по высоте и окончанию штриха
Кегль приближен к HUD-подписям (~18 px). Фон взят из игровой сцены, а не из лабораторного белого листа.
e
Развёрнутые апертуры
У e, a, s выходы раскрыты шире обычного: на светлом или шумном фоне они сохраняют внутренний просвет.
520
x-height 74,3%
Строчные занимают почти три четверти высоты прописных. Это повышает различимость коротких подписей и счётчиков.
0O
Разведённые пары
В парах 1/l, 0/O, q/p разница заложена в конструкцию: высоту, хвосты, ширину и направление штрихов.
00
25+ альтернатив
salt, zero, ss01–ss03 дают несколько вариантов характера без смены гарнитуры и без нарушения набора.
Фея с жёлтым луком щёлкнула тетивой, выбила щит у дракона и хмуро прыгнула через портал.
/07 — PangramEN
Five angry wizards jump backward, loot quartz, and vex the cyber-dragon.
/08 — Кегли
Проверка в разных кеглях
/09 — Вариативность
Ось насыщенности как настройка иерархии
Вариативная ось 300–700 меняет плотность штриха без смены рисунка. Светлые значения подходят для второстепенных подписей и длинных строк, средние держат обычный интерфейсный текст, тёмные помогают выделить системное сообщение, счётчик или кнопку. Именованные стили — Light, Regular, Medium, SemiBold, Bold — это удобные точки на той же оси, а не отдельная идея блока.
a
Light · 300
→
a
Bold · 700
MISSION FAILED
Light · 300 · второстепенные подписи
→
MISSION FAILED
Bold · 700 · системное сообщение
500насыщ.
300700
Съешь же ещё этих мягких французских булок, да выпей чаю.
/10 — OpenType
Возможности OpenType
Набор содержит несколько OpenType-функций, которые заметно меняют характер отдельных знаков. Их можно включить через font-feature-settings в CSS или соответствующий параметр в игровом движке.
Жизнь · Надежда · МужествоЖизнь · Надежда · Мужество
/11 — Анатомия штриха
Низкий контраст штриха
В Cognis нет выразительной модуляции между толстыми и тонкими участками. Для игрового интерфейса это важнее декоративного жеста: тонкие места не проваливаются на шумном фоне, при сглаживании и в мелком кегле.
O
круглая форма
безтонких мест
e
открытая апертура
просветне закрывается
n
плечо строчной
ровнопо плотности
Ж
сложный знак
читабельнов узле
AVWMЖ
/12 — Акцент кривой
Небольшой прогиб меняет силуэт
В A, M, V, W, Х, Ж прямые штрихи получили мягкий прогиб. Он ослабляет излишнюю геометрию и делает силуэт слова менее механическим, не снижая читаемости.
Зачем: в углу экрана игрок видит не отдельные знаки, а общий силуэт слова. Чем органичнее этот силуэт, тем быстрее мозг опознаёт его — без перевода взгляда и без долгой фокусировки.
/13 — Стилистические альтернативы
8 поворотов характера
Слева — стандартное начертание, справа — вариант через salt. Альтернативы позволяют менять интонацию набора, сохраняя общий ритм гарнитуры.
0→0
Ноль
2→2
Двойка
3→3
Тройка
4→4
Четвёрка
K→K
K
g→g
g
a→a
a
Q→Q
Q
в игре●in-game●HUD●SUBTITLES●DIALOG●MENU●в игре●in-game●HUD●SUBTITLES●DIALOG●MENU●
/14 — В игре
Шрифт в интерфейсе
Четыре сценария показывают разные задачи интерфейсной типографики: быстрое чтение, периферийное распознавание, длинный текст и заголовочный тон. Во всех случаях используется один файл Cognis VF.
/14.1
Субтитры
Субтитр часто существует на экране всего несколько секунд, при этом фон и камера продолжают двигаться. Cognis сохраняет форму строки за счёт спокойного трекинга и раскрытых знаков.
Старейшина Алдрик
Врата запечатаны тысячу лет. То, что за ними, никогда не предназначалось для смертных рук.
/14.2
HUD
HUD считывается периферийно: игрок не изучает счётчик, а быстро распознаёт его значение. Поэтому в Cognis важны табличная устойчивость цифр, открытые формы и чёткий силуэт коротких подписей.
+
73
24/180
Импульсная винтовка MK-IV
Текущая задача
Добраться до центральной командной палубы
ЮЗЗСЗССВ
/14.3
Диалоги
Диалоговое окно содержит больше текста, чем HUD или меню, но по-прежнему находится внутри игрового темпа. Шрифт должен поддерживать голос персонажа, не перетягивая внимание на себя.
⚔
Капитан Мира
Мост впереди — единственный путь через ущелье. Мои разведчики докладывают, что он под усиленной охраной, но, возможно, есть другой путь через старые руины на востоке. Решение за вами, командир.
1Идём через мост. Готовьте отряд к штурму.
2Отправьте разведчика к руинам. Нужно больше информации.
3Ждём до темноты. Ночь даст нам преимущество.
/14.4
Главное меню
Главное меню задаёт тон ещё до первого кадра. Та же гарнитура должна работать и в крупном названии, и в мелких игровых сообщениях: один шрифт, одна ось насыщенности, разные роли.
