Datatype: вариативный шрифт, который рендерит инлайн-графики через OpenType-лигатуры без JavaScript

Фрэнк Тизеллано выпустил Datatype — бесплатный вариативный шрифт, который рендерит инлайновые графики исключительно силами типографского движка. Вместо того чтобы подключать сторонние JS-библиотеки или генерировать SVG, разработчики могут использовать возможности OpenType. Механика построена на подмене лигатур: браузер считывает текстовый синтаксис и на лету отрисовывает визуализацию.

Синтаксис работает прямолинейно. Если написать в HTML-коде {b:15,45,80,30}, движок конвертирует строку в столбчатую диаграмму из четырех элементов. Для спарклайнов используется префикс l, для круговых диаграмм — p. Векторные формы поддерживают до 20 точек данных со значениями от 0 до 100. Поскольку шрифт вариативный, плотностью и толщиной графиков можно управлять через CSS-свойство font-variation-settings, меняя значения осей ширины и веса.

Технически графики ведут себя как обычный текст, поэтому автоматически подстраиваются под метрики соседней гарнитуры — будь то Merriweather или Fira Code. Это снимает проблему выравнивания базовой линии при верстке финансовых таблиц, серверных логов или плотных дашбордов. Исходники проекта и документация доступны на GitHub.