dy / linefont

Font for rendering line chart data

linefont

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

Demo  •  Google fonts  •  V-fonts  •  Test

Usage

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>

Ranges

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

Variable Axes

Tag	Range	Meaning
wght	1-1000	Line thickness (quarter upms, linear).
wdth	25-200	Width of the font (ie. zoom of the signal).

Features

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

npm package

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ţŤ...

Building

make build

• Tests
• Glyphs
• Text
• Waterfall

Troubleshooting

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

See also

• wavefont − font-face for rendering waveforms.

🕉

linefont's Issues

Readjust weights

From dy/wavefont#43 (comment) exact weight values can be readjusted to match 2 ** (1/3) coef between them.

Prepare for GF

Mainly must take structure, building and tests from wavefont.

reported FAIL about glyphsname

The glyphs don't seem to have production names

🔥 FAIL: Glyph names are all valid? (com.google.fonts/check/valid_glyphnames)
🔥 FAIL The following glyph names do not comply with naming conventions: to-0, to-1, to-10, to-100, to-101, to-102, to-103, to-104, to-105, to-106 and 118 more.
Use -F or --full-lists to disable shortening of long lists.

Transparent color produces glitches

Provide CSS subranging

linefont10,
linefont50 (makes sense, since linefont100 is relatively large!)
linefont100 (defaultish)
linefont500 (ugh)
linefont1000 (emmm... )
linefont (1Mb?)

Based on used characters load one or another version

Joins via subs or via components.

1. Via subs:

TTF: 73.71Kb, WOFF2: 7.76Kb

2. Via components:

TTF: 101Kb, WOFF2: 8.32Kb

STAT and instances

If possible you could tweak the value to range:

• wght(100,900) default 400. You can map value 5 to user value 100, and 400 to 900
• wdth(25,200) default at 100

wdth and wght being common axes, you don't need to include the stat entry in config.yaml, gftools would build it correctly.

Instances in FVAR table should follow this: #6244

Axis interpolation screws tangents...

Support ASCII code points

Would it be possible to add support for ASCII codepoints instead of the U+0100-017F unicode range?
ASCII codes 97-122 and 65-90 in particular.

My use case is adding fancy underline to a text simply by duplicating it and using linefont.

Thanks!

Add monotone axis

Monotone interpolation axis may reduce need in precise font: #1

Wavont compat

Make short test of wavefont compatibility. Mainly we need to align line thickness and span.