Plumb is a foundry that does not exist, showing off three typefaces that do. Every letter on this page is live text in a variable font. Nothing is an image. Push the letters around, then set your own and copy the CSS.
Width
wdth 25 to 151. Each line stretches from compressed to extended as it crosses your screen.
One font file.
Every width
From narrow
To wide open.
A traditional family needs a separate file for Condensed, Normal and Extended. A variable font draws the two extremes once and lets the browser work out everything between them, live, at any size.
That is what you are scrolling. The four lines above are one font at four weights, and the width is tied straight to the scroll position. No canvas, no images, no script doing the stretching.
Fig. 1
CSS animation-timeline: view()
Weight
wght 100 to 1000. Hairline at the bottom of the screen, extra black by the middle.
Weight
Nine named weights is a habit left over from metal type. Here there are nine hundred and one. If Regular feels a touch thin on a dark background, ask for 437. If Bold shouts, try 655. The number on the left is the real weight of the word above, right now.
Axis parade
Drawer
Three open source typefaces. Hover a row to wake it up, click to load it in the tester.
Glyphs
117 characters. Hover or tap one. The orange shadow is the same glyph at the heaviest weight.
- Glyph
- R
- Unicode
- U+0052
- HTML
- R
- Class
- Uppercase
- Advance / 1000
- 0
Tester
Type your own words, drag the axes, then copy the link tag and the CSS. They reproduce exactly what you see.
Colophon
Sets itself. The fresh letters arrive at grade 150 and dry to grade 0 without moving their neighbours.