wavefont

A typeface for rendering data: waveforms, spectrums, diagrams, bars etc. Demo, v-fonts/wavefont.

Usage

Put wavefont.woff2 into your project directory and use this code:

<style>
	@font-face {
		font-family: wavefont;
		src: url(./wavefont.woff2) format('woff2');
	}
	@font-face {
		font-family: blank;
		/* src: url(./AdobeBlank2VF.ttf.woff2); */
		src: url(data:application/x-font-woff;charset=utf-8;base64,d09GMgABAAAAAARMABMAAAAAC1AAAAPjAAEAxQAAAAAAAAAAAAAAAAAAAAAAAAAAGUYcID9IVkFSVAZgP1NUQVQkP1ZWQVJjAIIAL0YKWFwwLgE2AiQDCAsGAAQgBYsyBzEXJBgIGwEKEcXkJfmqgCdD4yWAULaeeBovVzstIc6riunXpnmtXivg+BLWsFA1x8PTXP+eO5PNAn8AUCwJsYCgqxxZ1JUELrLsXkOo3TUpDjbRB8Tvo61HSFe6NVBVO1SvlxDEvYxsxE4DfNN8ImIOJ0gqtv/9fq0+Wat/NsTds46FRuqU8lf0gse1iqY3dLfkGRqhqiTVConpREoxCY1FPHelp1Ny+uwFWpZYoBA7dh04oaUEhFLUFDri7o2bj2BaFYGOOeZ1vLhvdQ0IMAUABHoC6yWZLbYAgJ9NX06XhIBcaa5iDdL76Qz2k7njkrV+ci1cx5uLNbeOtx22hbrOrMaqxrO/9QL9NwVgAUJoSZgClkjP3HjyTmDP7j0nIoQAM3AGAJfCk0F+cI8EIeugpw/+AUwGvq0R/IaJbxBM/EE9gRAIQEJCRkaBAg00UKJEE0200EIbbXTQQRdd9NBDH30MMMAQQ4wwEuEmSaYkBnnYDCBXEDnpwW9EJK5WZJBAgQZGmA0oQIMiXw91sjku790e3LzZfHZ461Z5+/ozFVTN2diLFz9/ql67cl8k+nvMWO4OBBKYtXsY6LwaespXbYFXt+TqtTcIhK83bvTx5eGGf1s5V/D9qt/p9najlt/Mj6KUQFCxsYrB4sZY4VoloVbYkpHGKGGx3RT/yaJo4wSfCEucQDLwLLLV3u5asKHhhk9QmpVZaOnEerTNyqaunQW61ucM+umj+BAD6xtRwIJe7SdfPJ0j6BTPIkzxelO3WVhf//c2jpwWnwkGXVHJ7/FoDWDAQVkQ+OBTFKZJu8lXljDZnk7YqITmExH/y0MxUyoCDOBqChwdIU8mZhKKCJ2upGVgbGinpSoKOgThuVdIkAJUCkD1UYqNlj3J5kSRrqElYYogo7sLvSE3eCVefdEJa/SRA1H0BWVMIMAKSoG1TMqBSbtr5Q+DNGe+gASmqJQCTiiX8mISEDDtHgvYUEpCDjCuCZD0oQJ1YQ3sjHRPlXdfK+E/rSY28Bg4cI6cV00RDZaMcjGklsyXggUDJ2BRVwCGvwLAfxa/WTib27k4LwoOHB0NbJMLE/HNdo7AyM7W2AINfIZwPg2I0KNAtGALqE+jIEEkfiTfWAAkgSiiBZJkLDgSCXf6EaZ2NnDRspAUq7MFXOYSaLDGnozJK4dkPCmTRSmRKSxxWiDAMFMxKVLnoZ7iPA0oLgj+UBlRkrmlg3DbW9ieSDMnJbu4KqNIxL1kjISZ9GjJ5+t2TALq0U3AcYLmZeFeX9Ww6+F30lD/+kXetcg6ZJg3EalzO/5jvn7dbo3cSO6f/4dc8dJzzBkJMwsAAAA=) format('woff2');
	}

	.wavefont {
		font-family: wavefont, blank;
		--wdth: 10;
		font-variation-settings: 'wdth' var(--wdth), 'algn' 0.5, 'radi' 30;
	}
</style>

<textarea id="waveform" class="wavefont" cols="100"></textarea>

<script>
	waveform.textContent = values.map(v => String.fromCharCode(0x100 + v)).join('')
</script>

Variable features

Hints

• Charcodes fall under marking characters unicode category, ie. recognized as word by regexp and can be selected with Ctrl + → / double click.
• Vertical position of a bar can be adjusted via combining accent grave  ̀ (U+0300) or accent acute  ́ (U+0301) for down/up shift correspondingly. Eg. \u0101\u0300\u0300\u0300 shifts bar 3 values down, etc.
• Values below range are limited to 0, eg. 0x0ff in wavefont100 is mapped to 0.
• Values above range are supported to some extent and then clipped, eg. 0x164 (dec 101) in wavefont100 is supported and value above 108 is clipped.
• Space, tab and other non-marking characters alias to 0 value.
• Dashes, dot, underscore characters alias to 1 value.
• Vertical lines like | alias to max value.
• Block characters ▁▂▃▄▅▆▇█ are mapped to corresponding bars.

Building

UFOs are generated by plop, to modify font the plopfile change is required. TTF is built with fontmake. OTF is built with afdko. WOFF is built with fonttools.

See also

• linefont − font-face for rendering linear data.

References

• unified font object spec − unified human-readable format for storing font data.
• feature file spec − defining opentype font features.
• afdko − font building tools from Adobe.
• fontmake − font building tool from Google.
• unicode-table − convenient unicode table.
• adobe-variable-font-prototype − example variable font.
• designspace xml spec − human-readable format for describing variable fonts.
• plopfile − file generator based on templates.
• Adobe Blank − blank characters variable font.

🕉