Datatype: fonte OpenType variável que vira texto em gráficos inline

O que é Datatype

Datatype é uma fonte OpenType variável que transforma expressões de texto simples em gráficos inline. Sem JavaScript, sem imagens, sem bibliotecas de renderização - basta digitar a sintaxe e o mecanismo de substituição de ligaturas da fonte faz o resto. O projeto é open source sob a licença SIL Open Font License, foi criado por Frank Tisellano com auxílio de IA, e está disponível no Google Fonts e no GitHub.

Tipos de gráficos suportados

A fonte oferece três tipos de gráficos, cada um com uma sintaxe própria. Bar charts usam {b:valores} com valores separados por vírgula entre 0 e 100, suportando até 20 barras. Sparklines usam {l:valores} com a mesma lógica, aceitando até 20 pontos. Pie charts usam {p:valor} com um único número de 0 a 100 representando a porcentagem preenchida. A mesma expressão pode ser renderizada de 14px a 64px mantendo a legibilidade.

Eixos variáveis e controle visual

Como fonte variável, Datatype expõe dois eixos: Width (largura) e Weight (peso). Isso permite ajustar a densidade e a espessura dos gráficos em tempo real, adaptando-os ao contexto visual. O tamanho da fonte também influencia diretamente a aparência dos gráficos, o que significa que o mesmo código produz resultados visuais diferentes conforme o contexto tipográfico.

Casos de uso práticos

Os gráficos funcionam em qualquer lugar onde texto funciona: tabelas, dashboards, relatórios. O site demonstra uma watchlist de ações com sparklines renderizadas inteiramente em Datatype, mostrando tendências de 30 dias para AAPL, MSFT, NVDA, TSLA e AMZN. Outro exemplo mostra gráficos embutidos em prosa corrida, combinando com as métricas da fonte ao redor - testado com Merriweather (serifada), IBM Plex Sans (sans-serif) e Fira Code (monospace). Isso abre possibilidades para relatórios médicos, monitoramento de infraestrutura e documentos financeiros sem depender de bibliotecas pesadas.

Integração

A implementação é direta: carregar a fonte via @font-face com o arquivo WOFF2, aplicar font-family: 'Datatype' nos elementos que contêm as expressões de gráfico, e opcionalmente ajustar os eixos com font-variation-settings. No HTML, basta envolver a expressão em um <span> com a classe apropriada. O projeto oferece um guia de integração para setup completo.