4 ms·
Probably useless for any applications, but this is really cool! The page with the definitions of all characters A–Z is here: https://yusugomori.com/projects/css
by svat 9y ago
Probably useless for any applications, but this is really cool! The page with the definitions of all characters A–Z is here: https://yusugomori.com/projects/css-sans/fonts https://yusugomori.com/projects/css-sans/fonts It's interactive, so you can actually see how the definition (CSS code) of each character corresponds to the actual shape seen.
Something like this (but with different primitives, not CSS) is how Donald Knuth made the program Metafont, using which he created Computer Modern in all its variants (the font used by default by every TeX/LaTeX document). His intent was to capture the “idea” of each letter shape (glyph in the font), by writing a program for drawing that letter, instead of simply drawing it. He came up with something vaguely similar (pens of varying thickness, erasers, etc). The program is described in Volume C of Computers and Typesetting (The METAFONTbook), and Volume E is a thick hardcover book somewhat like this page, which gives the definition of (program for) each character next to a picture of its shape.
More Metafont-related links, if anyone finds this sort of thing inspiring:
- https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/the-concept-of-a-meta-font.pdf https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/... (this paper is a work of art!)
- https://www.metaflop.com/modulator https://www.metaflop.com/modulator (use the sliders)
- https://tex.stackexchange.com/a/423720/48 https://tex.stackexchange.com/a/423720/48
Metafont may not have had the right primitives for character drawing, and CSS obviously doesn't (it's not what it's designed for), but the idea of describing shapes is very interesting, and I still hope (despite decades of “failure”) that it can catch on. Maybe with interactive input and immediate visual feedback, it would be more appealing, at least for some people.
- amyjess 9y agoTo me, the most interesting part of Metafont is that it can take parameters. So your font could, for example, take a parameter for weight, letting you create as many different weight variants as you like. You can use one algorithm to create a Thin, Light, Regular, Medium, Demi, Bold, Black family of fonts. Or you could put a skew parameter in to generate an Oblique version (though true italics would require a separate algorithm).
- foobarrio 9y agoWe could skew fonts now if we wanted to. TTF fonts are mostly quadratic Bezier curves so we can redefine what the axes to use when rendering the font glpyhs. Instead of i = (1, 0), j = (0, -1) we can use i = (1, 0) j = (0.3, -1). There's a lot more to fonts obviously like bitmap glyphs, hinting, kerning, etc but we could build in some params if we wanted to.
- Ciantic 9y agoThere is a term for that "variable font". One type face come to mind, currently being developed, which should come out in september by famous Font Bureau. [1] [1]: https://www.typenetwork.com/brochure/opentype-variable-fonts-moving-right-along/ https://www.typenetwork.com/brochure/opentype-variable-fonts...
- specialist 9y agoThe novel bit here, for me, is how the 'C' 'G' and 'J' use 'knockouts' to remove 'ink', kinda like using a CSG (constructive solid geometry) subtraction. Very clever.