A variable OpenType font that turns text into inline charts.
Datatype uses OpenType ligature substitution to transform simple text expressions like {b:30,70,50,90} into visual charts—no JavaScript required.
- Bar charts:
{b:1,3,7,9,4,2}— up to 20 values - Sparklines:
{l:2,5,3,8,1,6,4}— up to 20 points - Pie charts:
{p:75}— single percentage
Variable font axes:
- Width (wdth): 50–150 — controls spacing (default: 100)
- Weight (wght): 100–900 — controls line thickness (default: 400)
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'Datatype';
src: url('Datatype.woff2') format('woff2');
font-weight: 100 900;
font-stretch: 50% 150%;
}
.chart {
font-family: 'Datatype', sans-serif;
font-variation-settings: 'wdth' 100, 'wght' 400;
}
</style>
</head>
<body>
<p class="chart">
Sales this quarter {l:20,45,60,55,80,95} are up significantly.
</p>
</body>
</html>- Download font files from Releases
- Install TTF files:
- macOS: Copy to
~/Library/Fonts/ - Windows: Copy to
C:\Windows\Fonts\ - Linux: Copy to
~/.local/share/fonts/
- macOS: Copy to
- Use in any application that supports OpenType ligatures
Note: Enable ligatures/contextual alternates in your application:
- Adobe apps: Character panel → OpenType → Ligatures
{b:value,value,value,...}
- Values: 0–100
- Count: Up to 20 bars
- Example:
{b:15,45,80,30,60,90,20}
{l:value,value,value,...}
- Values: 0–100
- Count: Up to 20 points
- Example:
{l:10,40,25,70,50,90,35,60}
{p:value}
- Value: 0–100 (percentage)
- Single value showing percentage filled
- Example:
{p:62}
- Python 3.9 or later
- pip
pip install -r requirements.txt# Build variable font + 15 static instances
python sources/build.py
# Development mode (faster, builds only default variant)
python sources/build.py --dev# Start dev server with live preview
make dev
# Or manually:
python dev/server.py
# Open http://localhost:8080Output:
fonts/variable/Datatype[wdth,wght].ttf— Variable font (TTF, 4.0MB)fonts/variable/Datatype[wdth,wght].woff2— Variable font (WOFF2, 73KB)fonts/ttf/— 15 static TTF instancesfonts/webfonts/— 15 static WOFF2 instances
| Axis | Tag | Min | Default | Max |
|---|---|---|---|---|
| Width | wdth | 50 | 100 | 150 |
| Weight | wght | 100 | 400 | 900 |
15 static font combinations (9 standard + 6 custom width variants):
Standard Weight Instances (wdth=100):
| Instance | Width | Weight |
|---|---|---|
| Thin | 100 | 100 |
| ExtraLight | 100 | 200 |
| Light | 100 | 300 |
| Regular | 100 | 400 |
| Medium | 100 | 500 |
| SemiBold | 100 | 600 |
| Bold | 100 | 700 |
| ExtraBold | 100 | 800 |
| Black | 100 | 900 |
Custom Width Combinations:
| Instance | Width | Weight | Use Case |
|---|---|---|---|
| Thin UltraCondensed | 50 | 100 | Minimal sparklines |
| Light Condensed | 75 | 300 | Space-efficient |
| SemiBold Condensed | 75 | 600 | Dense dashboards |
| Medium Expanded | 125 | 500 | Readable charts |
| Light ExtraExpanded | 150 | 300 | Maximum spacing |
| Black ExtraExpanded | 150 | 900 | Maximum impact |
- Format: OpenType variable font (TTF/WOFF2)
- Features: Contextual Alternates (
calt), Standard Ligatures (liga) - Glyph count: 10,850 (per master, 9 masters total)
- File size: 4.0 MB (TTF) / 78 KB (WOFF2)
- Unicode coverage: Google Fonts Latin Core
Variable fonts:
- Chrome 62+
- Firefox 62+
- Safari 11+
- Edge 17+
Ligature substitution:
- All modern browsers with OpenType feature support
datatype/
├── sources/ # Python build scripts
│ ├── build.py # Main build script
│ ├── config.py # Font parameters & scales
│ ├── font_builder.py # FontTools assembly
│ └── glyphs/ # Glyph drawing modules
├── docs/ # Specimen website (GitHub Pages)
├── dev/ # Development server
├── fonts/ # Generated fonts
│ ├── variable/ # Variable font files
│ ├── ttf/ # Static TTF instances
│ └── webfonts/ # Static WOFF2 instances
└── OFL.txt # SIL Open Font License 1.1
See CONTRIBUTING.md for development guidelines.
Quick contribution workflow:
- Fork the repository
- Create a feature branch (
git checkout -b feature/my-feature) - Make your changes
- Test thoroughly (
python sources/build.py) - Submit a pull request
This Font Software is licensed under the SIL Open Font License, Version 1.1.
See OFL.txt for full license text.
Design & Development: Frank Tisellano
Built with: fontTools
- Specimen Site — Interactive examples and documentation
- Integration Guide — Framework setup and usage tips
- Releases — Download font files
- Issues — Report bugs or request features
Huge thanks to @emmamarichal and @davelab6 for their guidance (and for Emma's beautiful proofs page!)
Made with ❤️ by Frank Tisellano