Repository files navigation

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

Demo  •  Google fonts  •  V-fonts  •  Test

PutLinefont[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 --><textareaid="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>

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 edgesa andZ (height = number of letter).
• U+0100-017F for 0-127 values with step 1 (extra 27 values).

• Ranges, values and weight is compatible withwavefont, so fonts can be swapped atwdth=100, preserving visual coherency.
• Visible charcodes fall undermarking characters unicode category, ie. recognized as word by regexp and can be selected withCtrl +→ or double click. Eg. segments separated by or- are selectable by double click.
• Characters outside of visible ranges (but within Core Latin) are clipped to0, eg.,\t etc.
• Caret span is -20..120, so line-height = 1.4 is minimal non-overlapping selection.

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

importlffrom'linefont'// get characters for values from 0..127 rangelf(0,1,50,99,127, ...)// ĀāIJţŤ...

make build

• Tests
• Glyphs
• Text
• Waterfall

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

• wavefont − font-face for rendering waveforms.

🕉