← Retour au blog
tech 10 June 2026

Datatype: The Variable Font That Turns Text Into Charts

Datatype is an OpenType variable font that transforms simple text expressions into inline charts, without the need for JavaScript or images. Discover how this can revolutionize your data presentation.

Article inspired by the original source
Datatype — variable font that turns text into charts ↗ franktisellano.github.io

Introduction

In a world where data visualization is crucial for decision-making, having tools that simplify this process is vital. Datatype emerges as an innovative solution: a variable font that transforms text expressions into inline charts. Imagine being able to integrate bar charts, sparklines, and even pie charts directly into your text, without resorting to JavaScript libraries or images.

What is Datatype?

Datatype is an OpenType variable font designed to convert simple text expressions into charts. What makes Datatype remarkable is its ability to generate charts using only ligature substitution. Just type the correct syntax and Datatype does the rest.

Key Features

  • Charts Without JavaScript: Charts are generated directly by the font, eliminating the need for complex scripts or image rendering.
  • Compatibility Across Environments: Whether in tables, dashboards, or reports, Datatype adapts to all textual contexts.
  • Control Over Chart Density and Weight: With its variable axes, you can adjust the density and weight of the charts to suit your visual needs.

How to Use Datatype

Integrating Datatype into a project is straightforward. Here's a quick guide:

  1. Add Datatype to your CSS:

``css @font-face { font-family: 'Datatype'; src: url('Datatype.woff2') format('woff2'); font-display: swap; } ``

  1. Use it in your chart expressions:

``html <span class="chart">{l:20,40,70,50,90}</span> ``

Use Cases

Data Storage

Imagine a stock tracking dashboard. With Datatype, 30-day trends can be visualized directly in the text, making financial reports more dynamic and understandable.

Health Reports

In the medical field, presenting data such as heart rate or oxygen levels becomes intuitive and immediate, directly in the text of reports.

IT Performance Monitoring

For software engineers, monitoring CPU loads or memory usage can be done directly in the code, making reading and analysis easier.

Conclusion

Datatype represents a significant advancement in how we integrate and present data. By simplifying chart creation while maintaining flexibility and compatibility, it stands as an indispensable tool for any professional working with data. Let's discuss your project in 15 minutes.

Datatype variable font data visualization inline charts OpenType
Deepthix newsletter · 100% AI · every Monday 8am

An AI agent reads tech for you.

Our AI agent scans ~200 sources per week and ships the best articles to your inbox Monday 8am. Free. One click to unsubscribe.

Visit the newsletter page →

Want to automate your operations?

Let's talk about your project in 15 minutes.

Book a call