> # [Datatype — variable font that turns text into charts](https://franktisellano.github.io/datatype/)

A variable font that turns text into charts.

{b:20,55,40,80,65} {l:10,40,25,70,50,90} {p:73} {b:85,30,60,10,45} {l:50,20,80,35,65,10} {p:41}

GitHub★ Google Fonts

## Datatype is data as type

Datatype is an OpenType variable font that turns simple text expressions into inline charts. No JavaScript, no images, no rendering library — just type the syntax and Datatype's ligature substitution does the rest.

{b:30,70,50,90}

{b:30,70,50,90}

Bar chart

{l:10,50,30,80,20}

{l:10,50,30,80,20}

Sparkline

{p:65}

{p:65}

Pie chart

## Datatype is a variable font

Two axes give you control over chart density and weight. Drag the sliders to see charts respond in real time.

Width

50

Weight

400

Size

{b:15,45,80,30,60,90,20} {l:5,35,20,70,45,85,30,60} {p:52}

## Datatype at different sizes

The same expressions rendered from 14px to 64px.

14px {b:30,70,20,90} {l:20,50,30,80,10} {p:65}

18px {b:30,70,20,90} {l:20,50,30,80,10} {p:65}

24px {b:30,70,20,90} {l:20,50,30,80,10} {p:65}

36px {b:30,70,20,90} {l:20,50,30,80,10} {p:65}

48px {b:30,70,20,90} {l:20,50,30,80,10} {p:65}

64px {b:30,70,20,90} {l:20,50,30,80,10} {p:65}

## Datatype in context

Datatype charts work anywhere text does — tables, dashboards, reports. Here's a stock watchlist with sparklines rendered entirely in Datatype.

Charts sit naturally within running prose, matching the surrounding typeface's metrics.

Merriweather (Serif)

Revenue grew steadily through Q3 {l:15,28,40,52,63,78,88,95,74,58} before a seasonal dip. Market share {p:34} held firm against competitors, and our product mix {b:60,45,80,30} shifted toward higher margins.

IBM Plex Sans (Sans-serif)

The patient's heart rate {l:68,82,55,90,42,78,60,85} remained within normal range. Blood oxygen {p:97} was excellent, and the weekly activity breakdown {b:25,40,55,75,90} showed consistent improvement.

Fira Code (Monospace)

cpu_load {l:15,45,90,30,75,20,85,95} spiking mem_used {p:78} req/s by endpoint {b:90,35,70,15,60}

## How to use Datatype

Add Datatype to your CSS, then just type chart expressions in your HTML.

@font-face { font-family: 'Datatype'; src: url('Datatype.woff2') format('woff2'); font-display: swap; } .chart { font-family: 'Datatype', sans-serif; font-variation-settings: 'wdth' 15; font-weight: 400; }

Sales <span class="chart">{l:20,40,70,50,90}</span> are up. Budget <span class="chart">{p:73}</span> utilized. Results <span class="chart">{b:30,70,20,90}</span> by quarter.

It's easy to use Datatype on the web. See the integration guide for setup instructions.

## Bar charts {b:values}

Comma-separated values, each 0–100. Up to 20 bars.

{b:15,45,80,30,60}

{b:15,45,80,30,60}

5 bars — values set bar height as a percentage

## Sparklines {l:values}

Comma-separated values, each 0–100. Up to 20 points.

{l:10,40,25,70,50,90,35}

{l:10,40,25,70,50,90,35}

7 points — values set point height as a percentage

## Pie charts {p:value}

A single value, 0–100, representing the percentage filled.

{p:62}

{p:62}

62% filled