Datatype - uma fonte variável que transforma texto em gráficos

• Com o conceito de "dados como tipografia (data as type)", exibe gráficos apenas com texto, sem JS/imagens/bibliotecas de renderização
• Usa substituição de ligaduras OpenType para converter expressões de texto simples como {b:30,70,50,90} em gráficos inline
• Suporta 3 tipos de gráfico: barras/linha/pizza
  • Gráfico de barras: {b:30,70,50,90,64,27,72,42} valores separados por vírgula (cada um de 0–100), até 20 barras
  • Sparkline: {l:10,50,30,80,20,15,48,72,37} valores separados por vírgula (cada um de 0–100), até 20 pontos
  • Gráfico de pizza: {p:69} {p:43} um único valor percentual entre 0–100
• Ajuste visual com tamanho da fonte e dois eixos variáveis
  • Width (wdth): 50–150, ajusta o espaçamento, padrão 100
  • Weight (wght): 100–900, ajusta a espessura da linha, padrão 400
• Como pode ser renderizado até mesmo entre caracteres, funciona como está em qualquer lugar onde caiba texto, como no meio do corpo do texto, dentro de tabelas e em mensagens de log
  • Também pode ser inserido facilmente em tabelas/dashboards/relatórios
• Na web, pode ser adotado com apenas 3 linhas de CSS
  • Carregue a fonte com @font-face → defina font-family: 'Datatype' → escreva no HTML <span class="chart">{l:20,40,70}</span>
  • font-variation-settings oferece opções adicionais de ajuste, como wdth
• Desktop: após instalar o TTF, pode ser usado em apps com suporte a ligaduras OpenType (Adobe etc.)
• Também é distribuída no Google Fonts, então pode ser usada sem hospedagem separada
• Oferece 15 instâncias nomeadas (9 Weights padrão + 6 combinações personalizadas de largura)
  • Inclui presets por uso, como Thin UltraCondensed (50/100), SemiBold Condensed (75/600), Medium Expanded (125/500) e Black ExtraExpanded (150/900)
• Quantidade de glifos: 10.850 por master, total de 9 masters
• Tamanho do arquivo: TTF 4.0MB / WOFF2 78KB, cobertura Unicode é Google Fonts Latin Core
• Suporte de navegador: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

• Explicação de funcionamento

  • Usa o recurso de substituição de ligaduras OpenType (ligature substitution)
  • Originalmente, ligaduras são um recurso que substitui combinações como fi, fl por um único glifo
  • O Datatype aplica isso para substituir um padrão inteiro como {b:30,70,50,90} por um único glifo de gráfico {b:30,70,50,90}
  • Se o navegador ou app der suporte ao recurso de ligaduras da fonte, ele é renderizado imediatamente sem executar JavaScript
• SIL Open Font License 1.1
• No site Specimen, é possível ver casos reais de uso

[winterjung]

{p:75} {l:40,10,10,40} {p:75}

[shakespeares]

{p:75} {l:40,10,10,40} {p:75}
Uau..

[xguru]

Que jeito de usar é esse?!

[crawler]

kkkkkkkkkk

[bichi]

kkkkkkk

[sigco]

{l:40,10,10,40} {p:75}

[crawler]

Nossa, isso é muito incrível kkkkk

[xguru]

No GeekNews, evitamos usar imagens sempre que possível, então, quando surge uma solução leve baseada em texto como essa, tentamos adotá-la sempre que dá.
Google revela a fonte de emoji em preto e branco Noto Emoji também já está aplicada há 4 anos, e ainda está funcionando muito bem 😀😃😄😁😆😅😍🥰😘

[kimjeongwonn]

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}

[seoseonyu]

Uau kkk, que curioso.