Datatype — variable font that turns text into charts

Datatype — 将文本转化为图表的变量字体

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.

Datatype 即“数据即字体”。它是一款 OpenType 变量字体，能将简单的文本表达式转化为行内图表。无需 JavaScript、无需图片、无需渲染库——只需输入语法，Datatype 的连字替换功能即可完成其余工作。

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.

Datatype 是一款变量字体。通过两个轴，你可以控制图表的密度和字重。拖动滑块即可实时查看图表的变化。

Datatype at different sizes

不同尺寸下的 Datatype

The same expressions rendered from 14px to 64px.

同一表达式在 14px 到 64px 之间的渲染效果。

Datatype in context

Datatype 的应用场景

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

Datatype 图表可以在任何支持文本的地方使用，例如表格、仪表盘和报告。以下是一个股票观察列表，其中的迷你图（sparklines）完全由 Datatype 渲染。

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

图表可以自然地嵌入正文中，并与周围字体的排版指标相匹配。

How to use Datatype

如何使用 Datatype

Add Datatype to your CSS, then just type chart expressions in your HTML. It’s easy to use Datatype on the web. See the integration guide for setup instructions.

将 Datatype 添加到你的 CSS 中，然后在 HTML 中输入图表表达式即可。在网页上使用 Datatype 非常简单。请参阅集成指南获取设置说明。

Bar charts {b:values} Comma-separated values, each 0–100. Up to 20 bars. 柱状图 {b:数值} 以逗号分隔的数值，每个数值范围为 0–100。最多支持 20 根柱子。

Sparklines {l:values} Comma-separated values, each 0–100. Up to 20 points. 迷你图 {l:数值} 以逗号分隔的数值，每个数值范围为 0–100。最多支持 20 个点。

Pie charts {p:value} A single value, 0–100, representing the percentage filled. 饼图 {p:数值} 单个数值，范围为 0–100，代表填充的百分比。