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).

Variable Axes

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

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 -20..120, so line-height = 1.4 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 from 'linefont'

// get characters for values from 0..127 range
lf(0, 1, 50, 99, 127, ...) // ĀāĲţŤ...

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.

dy / linefont

readme