Typeface for visualizing waveform data
npm install wavefontA typeface for rendering vertical bars data: waveforms, spectrums, diagrams, histograms, columns etc.

Playground • Google fonts • V-fonts •
Wavearea
Place [_Wavefont[ROND,YELA,wght].woff2_](./fonts/variable/Wavefont[ROND,YELA,wght].woff2) into your project directory and use this code:
``html
`
Wavefont bars correspond to values from 0 to 100, assigned to different characters:
* 0-9 chars are for simplified manual input with step 10 (bar height = number).
* a-zA-Z for manual input with step 2, softened at edges a and Z (bar height = number of letter).
* U+0100-017F for 0..127 values with step 1 (char = String.fromCharCode(0x100 + value)).
Tag | Range | Default | Meaning
---|---|---|---
wght | _1_-_1000_ | 400 | Bar width, or boldness.ROND | _0_-_100_ | 100 | Border radius, or roundness (percent).YELA | _-100_-_100_ | -100 | Alignment: bottom, center or top.
To adjust axes via CSS:
`css`
.wavefont {
font-variation-settings: 'wght' var(--wght, 40), 'ROND' var(--rond, 0), 'YELA' var(--align, 0);
letter-spacing: 1ch; / 1ch unit === 1 bar width /
}
* Ranges, values and width is compatible with linefont, so fonts can be switched 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. waveform segments separated by or - are selectable by double click.
* Characters outside of visible ranges are clipped to _0_, eg. , \t etc.-–._
map to _1_ value, | maps to max value, ▁▂▃▄▅▆▇█ map to corresponding bars.\u0101\u0302\u0302\u0301\u0301\u0301
* Accent acute ́ (U+0301) shifts bar 1-step up, circumflex accent ̂ (U+0302) 10-steps up. Eg. shifts 23 steps up.\u0101\u030c\u0300\u0300\u0300
* Accent grave ̀ (U+0300) shifts bar 1-step down, caron ̌ (U+030C) shifts 10 steps down, eg. shifts 13 steps down.
* Caret span is -20..120, so line-height = 1.4 is minimal non-overlapping selection.
To facilitate calculation, wavefont exposes a function that calculates string from values.
`js
import wf from 'wavefont'
// get characters for values from 0..127 range
wf(0, 1, 50, 99, 127, ...) // ĀāIJţŤ...
`
make build`
* Tests
* Glyphs
* Text
* Waterfall
* linefont − font-face for rendering linear data.
* Google Fonts guide.
* Unified font object spec − unified human-readable format for storing font data.
* Feature file spec − defining opentype font features.
* Adobe-variable-font-prototype − example variable font.
* Designspace XML spec − human-readable format for describing variable fonts.
* Adobe Blank − blank characters variable font.