Диодный шрифт
Design Engineer · 2026
Началось с логотипа: перебирал, как написать собственное имя, и пиксельная версия зацепила сильнее всех. Адаптировал один блок текста, посмотрел — и понял, что переезжать надо всем сайтом. Проблема одна: пиксельного шрифта с кириллицей, который гнётся под все задачи — от логотипа до подписи в 9 пикселей — не существует. Прогнал весь каталог Google Fonts: пиксельных с кириллицей единицы, и все жёсткие. Так что вместо поиска шрифта получилась задачка на вечер: нарисовать свой. Хватило часа.
Идея
Портфолио строилось вокруг мысли: я не только развиваю команды и системы — я их настраиваю. А настраивают приборы: экраны, табло, панели. У приборов текст не набран — он зажжён. Из всех визуальных ходов, что я перебирал, точки оказались единственным, который рифмовался со всем сразу: с логотипом, с карточками-экранами, с интерактивом.
Сначала честно искал готовое. Каталог Google Fonts: моноширинных с кириллицей — 19, дисплейных — 78, пиксельных среди них — штуки три, и каждый умеет ровно одно: стоять в одном кегле и не трогаться. А мне нужно было, чтобы одна система держала логотип, заголовки, навигацию, счётчики и подписи в девять пикселей. Таких не делают.
Значит, рисуем свой. Спойлер: это заняло час.
Как устроено
Не шрифт, а движок. Каждая буква — битмапа 5×7: строки вида «01110», единица — зажжённый диод. Рендер раскладывает текст в сетку точек и рисует SVG-кружками.
Параметры вместо кеглей. У рендера три ручки: шаг сетки, радиус точки и апскейл битмапы. На мелком кегле точки сливаются в букву, на крупном — распадаются в честное табло. Это решение дизайнера, а не свойство файла.
currentColor. Текст красится и анимируется обычными CSS-классами — ховеры, переходы, свечение работают из коробки.
Один язык — разные входы. Та же дот-сетка рендерит не только буквы: пиксельные иконки, логотип с анимациями (волна, эквалайзер, дождь, скан) и 3D-кубы с физикой на карточках кейсов. Сейчас движок живёт в 33 файлах сайта.
Весь набор — вживую
Чтобы не верить на слово, что это система, а не пара красивых букв — вот весь шрифт целиком. Кириллица, латиница, цифры, знаки. Покрути размерность: на «Подписи» точки сливаются в букву, на «Табло» — распадаются в честный диодный экран.
[ "00000", "00000", "00000", "00000", "00000", "00000", "00000", ]
«Сохранить в галерею» — глиф увидят все: галерея общая. Картинка уляжется в сетку по контрасту, битмапу можно вставить прямо в led-font.
Скрыть может любой — глиф пропадёт у всех. Раскрыть тоже может любой.
Пока пусто. Нарисуй что-нибудь и нажми «Сохранить в галерею» — глиф появится здесь у всех.
Что из этого получается
Шрифт — это движок, а не картинка. Одни и те же битмапы работают неоновой вывеской, аэропортовым табло с волной перерисовки, счётчиком с прокрутом цифр и маской для пиксельного огня. Всё ниже — живые компоненты, не видео.
Час с агентом
Самое интересное в этой истории — не глифы, а то, как она делалась. Всю дорогу от первой буквы до системы мы прошли вдвоём с AI-агентом за час: первые двадцать минут — эксперименты, дальше — примерки, настройка читаемости и сборка компонентов.
Моя часть — язык и решения: какая матрица, где точки должны читаться фактурой, а где сливаться, что попадает в систему, а что в корзину. Часть агента — рутина: разложить кириллицу по битмапам, собрать рендер, не сломать переносы. Самым сложным оказалась кириллица в 5×7 — уместить Ж, Щ и Ю в пять колонок — это упражнение в минимализме, которое мы итерировали вместе.
Это рабочая модель моего подхода «дизайн × код × AI»: не презентация о процессе, а его артефакт. Лучший пруф — перед глазами: весь этот кейс написан тем самым шрифтом.
Дальше
Движок вынесен в отдельный репозиторий под MIT — бери, рисуй свои глифы. Мини-конструктор уже работает: сетка, на которой рисуешь свой глиф точками, сохраняешь в браузерную галерею или закидываешь PNG — движок переведёт картинку в точки по контрасту, а дальше дорисовываешь руками. Из шрифта это превратилось в маленький инструмент — он выше по странице и на отдельной демо-странице.
Зачем мне это
Мне важно, чтобы у идей был физический конец — вещь, которую можно потрогать. Идея «настраиваю приборы» могла остаться слайдом в презентации, а стала шрифтом, которым написан весь сайт. Такие задачки держат руку на технологии и проверяют вкус: час работы — а отличить системное решение от украшательства по результату очень легко.