This would be incredible for some privacy applications if you wrote a wrapper on top of it to obfuscate the class names. Clearly visible to users, very difficult for bots to pick up without clearly looking for it.
Pretty darn cool! One limitation I wish I could think of a workaround for is that "cutting out" parts of some letters (C, G, J, Q) requires laying a rotated white square over it, with white as the hardcoded background color. So this will only work with other background colors if you know the background color ahead of time or can configure it in JS or something.
This is awesome. Not everything built needs to be held to best practices and these sorts of projects are what make the web exciting!<p>I know I'm on HN but everyone responding is taking a tone like the creator said, "this is the best way to do it and everyone should use this in production" while on the page it only says they built it because they could -- because CSS has evolved to support it.
Probably useless for any applications, but this is really cool! The page with the definitions of all characters A–Z is here: <a href="https://yusugomori.com/projects/css-sans/fonts" rel="nofollow">https://yusugomori.com/projects/css-sans/fonts</a> It's interactive, so you can actually see how the definition (CSS code) of each character corresponds to the actual shape seen.<p>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 <i>Computers and Typesetting</i> (<i>The METAFONTbook</i>), 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.<p>More Metafont-related links, if anyone finds this sort of thing inspiring:<p>- <a href="https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/the-concept-of-a-meta-font.pdf" rel="nofollow">https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/...</a> (this paper is a work of art!)<p>- <a href="https://www.metaflop.com/modulator" rel="nofollow">https://www.metaflop.com/modulator</a> (use the sliders)<p>- <a href="https://tex.stackexchange.com/a/423720/48" rel="nofollow">https://tex.stackexchange.com/a/423720/48</a><p>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 <i>describing</i> 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.
How do these handle kerning? I'm guessing they are monospaced? Looking on the page I can't find any of the CSS Sans used in a sentence.<p>Edit: Found a demo page[1], it's monospaced.<p>[1] <a href="https://yusugomori.com/projects/css-sans/archive" rel="nofollow">https://yusugomori.com/projects/css-sans/archive</a>
So are you supposed to write the whole thing using spans? Seems hard... maybe one way to pass the accessibility test (screen readers) is by putting the respective letter inside the span and set font-size to zero.
Fuck accessibility, right? Neat project, but please don't actually use this for anything serious. A lot of people use accessibility tools to interact with the web, and this this would make it nigh impossible for them to consume your content.