linefont

3.2.0 • Public • Published

linefont build

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

image

Demo  •  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);
}
</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, ...) // ĀāIJţŤ...

Building

make build

See also

  • wavefont − font-face for rendering waveforms.

🕉

Package Sidebar

Install

npm i linefont

Weekly Downloads

4

Version

3.2.0

License

MIT

Unpacked Size

1.25 MB

Total Files

33

Last publish

Collaborators

  • dy