Datatype
Type with Purpose
Good typography guides attention, improves understanding, and makes communication effortless.
The Anatomy of a Typeface
By FontSide · June 2026
Every typeface is a system of decisions — about stroke contrast, x-height, spacing, and rhythm. The best ones feel invisible: you stop seeing the letters and start hearing the voice behind them. That transparency is the hardest thing to design.
A high x-height opens up the counters and makes small text breathe. Tight tracking pulls a headline together; loose tracking gives a caption room to exhale. None of these choices are accidents — they are arguments about how reading should feel.
Uppercase
Lowercase
Numerals
Symbols
Package Manager
The recommended way to use fonts in modern web projects.
1. Install Package
pnpm add @fontsource-variable/datatype2. Import in App
import '@fontsource-variable/datatype/wght.css';3. CSS Usage
body {
font-family: "Datatype Variable", monospace;
}Google Fonts CDN
Use Google's CDN to embed the fonts directly via HTML.
HTML <head>
<!-- Please select at least one weight and style -->Fontsource CDN
Skip the build step by adding this directly to your global CSS file.
Global CSS
/* datatype-latin-wght-normal */
@font-face {
font-family: "Datatype Variable";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/datatype:vf@latest/latin-wght-normal.woff2)
format("woff2-variations");
}Background & Story
Datatype is a variable OpenType font that transforms simple text expressions into inline data visualizations—no JavaScript required. Using OpenType contextual alternates and ligature substitution, text like {b:30,70,50,90} automatically becomes a bar chart within your document.
Designed for seamless integration into text-based workflows, Datatype enables you to embed charts directly in emails, documentation, reports, and web content. The font supports three chart types: bar charts, sparklines (line charts), and pie charts, each activated through simple text syntax.
Chart Syntax:
- Bar charts:
{b:15,45,80,30,60}(up to 20 values, 0-100) - Sparklines:
{l:10,40,25,70,50}(up to 20 points, 0-100) - Pie charts:
{p:75}(single percentage value)
The font includes two variable axes for extensive customization: Width (wdth: 0-100) controls spacing and compactness, while Weight (wght: 100-900) adjusts line thickness and visual prominence. This enables designers to fine-tune charts for different contexts—from dense dashboards to prominent presentations.
Datatype uses the Contextual Alternates (calt) feature for bar charts and sparklines, ensuring broad compatibility across applications including Google Docs, Sheets, and Slides. Pie charts utilize Standard Ligatures (liga), which may require manual enablement in some environments.
Built with fontTools and licensed under the SIL Open Font License 1.1, Datatype brings the power of inline data visualization to any application that supports OpenType features.
This font includes glyphs from IBM Plex™ Mono: Copyright 2017 IBM Corp. with Reserved Font Name "Plex"
To contribute, see github.com/franktisellano/datatype.
Tags & Moods
Subsets
Install
pnpm add @fontsource-variable/datatypeDesigned by
Frank Tisellano
Links
License
OFL-1.1