Концепт сайта для шрифтовой студии — Гротеск Ноль
Буквы меняют насыщенность под курсором и по прокрутке, а в тестере можно набрать свой текст и подвигать оси.
Запись прокрутки сайта от первого экрана до подвала, 0:37. Вживую сайт отвечает на прокрутку и курсор — откройте живую версию.
Что это за сайт
Одностраничный сайт шрифта «Гротеск Ноль» от словолитни «Полутон». Страница работает как образец: посетитель видит буквы в крупном кегле, пробует оси в тестере, смотрит шрифт в афише, журнале и вывеске. В конце стоят три лицензии с ценами, выбор открывает письмо в словолитню с готовой темой.
Оформление
Светлая гамма: фон цвета кости, почти чёрный текст и киноварный акцент — курсор-точка, метки и ползунки. В сцене с буквой «О» палитра переворачивается в тёмную. Заголовки набраны вариативным гротеском, подписи — моноширинным шрифтом. Фотографии наборных касс и литер приглушены почти до чёрно-белых.
Кому подойдёт такой подход
- Шрифтовые студии и независимые дизайнеры шрифтов
- Авторы цифровых продуктов с лицензиями: иконок, тем, плагинов
- Проекты, где товар можно дать попробовать прямо на странице
Что внутри
Заголовок, который отвечает курсору
Название набрано двумя строками — чёрным и волосяным начертанием. Рядом с курсором жирные буквы худеют, а тонкие набирают вес: вариативная ось видна без единого ползунка.
Вход внутрь буквы «О»
В закреплённой сцене буква растёт, пока её просвет не займёт весь экран, а фон из светлого становится чёрным. Сквозь кадр пролетают другие знаки алфавита.
Девять начертаний по прокрутке
Слово «НОЛЬ» стоит на месте и с каждым шагом прокрутки тяжелеет от волосяного до чёрного. Шкала рядом показывает значение оси и название начертания.
Тестер с тремя ползунками
Строку можно стереть и набрать свой текст, затем поменять насыщенность, ширину и кегль. Четыре кнопки включают готовые сочетания — например, «Чёрный узкий».
Лента «В деле»
Шесть работ едут горизонтально, пока секция закреплена: афиша кинонедели, обложка журнала, неоновая вывеска, годовой отчёт. Четыре из них набраны прямо на странице, а не вставлены картинкой.
