wavefont
v3.5.0
Published
Typeface for visualizing waveform data
Downloads
5,222
Readme
wavefont
A typeface for rendering vertical bars data: waveforms, spectrums, diagrams, histograms, columns etc.
Playground • Google fonts • V-fonts • Wavearea
Usage
Place Wavefont[ROND,YELA,wght].woff2 into your project directory and use this code:
<style>
@font-face {
font-family: wavefont;
font-display: block;
src: url(./Wavefont[ROND,YELA,wght].woff2) format('woff2');
}
.wavefont {
--wght: 10;
font-family: wavefont;
font-variation-settings: 'wght' var(--wght), 'ROND' 30, 'YELA' 0;
}
</style>
<!-- Set values manually -->
<textarea id="waveform" class="wavefont" cols="100">
abcdefghijklmnopqrstuvwwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</textarea>
<script>
// Set values programmatically (more precise)
waveform.textContent = Array.from({length: 100}, (_,i) => String.fromCharCode(0x100 + i)).join('')
</script>
Ranges
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)
).
Variable axes
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:
.wavefont {
font-variation-settings: 'wght' var(--wght, 40), 'ROND' var(--rond, 0), 'YELA' var(--align, 0);
letter-spacing: 1ch; /* 1ch unit === 1 bar width */
}
Features
- 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
-
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.- Accent acute ́ (U+0301) shifts bar 1-step up, circumflex accent ̂ (U+0302) 10-steps up. Eg.
\u0101\u0302\u0302\u0301\u0301\u0301
shifts 23 steps up. - Accent grave ̀ (U+0300) shifts bar 1-step down, caron ̌ (U+030C) shifts 10 steps down, eg.
\u0101\u030c\u0300\u0300\u0300
shifts 13 steps down. - Caret span is -20..120, so line-height = 1.4 is minimal non-overlapping selection.
JS package
To facilitate calculation, wavefont exposes a function that calculates string from values.
import wf from 'wavefont'
// get characters for values from 0..127 range
wf(0, 1, 50, 99, 127, ...) // ĀāIJţŤ...
Building
make build
See also
- linefont − font-face for rendering linear data.
References
- 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.