linefont

Typeface for rendering small/medium-scale line charts (eg. time series).

Demo • Google fonts • V-fonts • Test

Usage

Put Linefont[wdth,wght].woff2 into your project directory and use this code:

<style>
@font-face {
	font-family: linefont;
	font-display: block;
	src: url(./Linefont[wdth,wght].woff2) format('woff2');
}
.linefont {
	--wght: 200;
	--wdth: 50;
	font-family: linefont;
	font-variation-settings: 'wght' var(--wght), 'wdth' var(--wdth);
	line-height: 1.4; /* match selection, optional */
}
</style>

<!-- Set values manually -->
<textarea id="linefont" class="linefont" cols="100">
abcdefghijklmnopqrstuvwwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</textarea>

<script>
// Set values programmatically (more precise)
linefont.textContent = Array.from({length: 127}, (_,i) => String.fromCharCode(0x100 + i)).join('')
</script>

Ranges

Linefont values span from 0 to 100, assigned to different characters:

0-9 chars for simplified manual input with step 10 (height = number×10).
a-zA-Z for manual input with step 2, softened at edges a and Z (height = number of letter).
U+0100-017F for 0-127 values with step 1 (extra 27 values). U+0180 renders as max (off-by-one clamp guard), higher codepoints render blank.

Variable Axes

Tag	Range	Meaning
`wght`	4-1000	Line thickness (quarter upms, linear), default 100.
`wdth`	25-200	Width of the font (ie. zoom of the signal), default 100.

Features

Ranges, values and weight is compatible with wavefont, so fonts can be swapped at wdth=100, preserving visual coherency.
Visible charcodes fall under marking characters unicode category, ie. recognized as word by regexp and can be selected with Ctrl + → or double click. Eg. segments separated by ` ` or - are selectable by double click.
Characters outside of visible ranges (but within Core Latin) are clipped to 0, eg. ` , \t` etc.
Caret span is -30..130 (covers full ink incl. value 127), so line-height = 1.6 is minimal non-overlapping selection.

npm package

Linefont npm package contains the font and a js function that produces font string from values.

import lf, { char } from 'linefont'

// characters for values from 0..127 range (clamped & rounded)
lf(0, 1, 50, 99, 127) // 'ĀāĲţſ'

// arrays or typed arrays of any length
lf(new Float32Array([0, 64, 127])) // 'Āŀſ'

Types included.

Building

make build

Troubleshooting

The font requires ligatures (rlig) enabled for it to be properly rendered. Some environments (eg. MS Word) may not have it enabled by default, in this case enable “All Ligatures” in advance font parameters.