Typeface for rendering small/medium-scale line charts (eg. time series).
![image](https://private-user-images.githubusercontent.com/300067/248886912-32827572-d01b-489e-b949-e1454640c3c9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzNjM1NzIsIm5iZiI6MTcyMzM2MzI3MiwicGF0aCI6Ii8zMDAwNjcvMjQ4ODg2OTEyLTMyODI3NTcyLWQwMWItNDg5ZS1iOTQ5LWUxNDU0NjQwYzNjOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODExJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxMVQwODAxMTJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01MTI0MjViZmZiNGIxNDViZWM0ZDFlNjI0NzQ3Y2E2YjRkMzZkNzljNjRjZGM3NTdhMjFhNTNlZDVkN2UxMWIwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.t8j0fIkM6JENz3RJM7XnpWJjEy7-_0-vtn3LgHLiJCw)
Demo • Google fonts • V-fonts • Test
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>
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).
Tag | Range | Meaning |
---|---|---|
wght |
1-1000 | Line thickness (quarter upms, linear). |
wdth |
25-200 | Width of the font (ie. zoom of the signal). |
- 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
-
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.
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ţŤ...
make build
- 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.