CSS Sans – A font created in CSS

You can use the font-size property as usual, if you convert the font definition from px units to em units.

EDIT: Demo with font-size: https://jsfiddle.net/6cg8dLnz/

Nope. While the characters are originally created with CSS rules, the resulting font is a web font standard .woff, completely accesible.

On-topic: I really like the hover animations under https://yusugomori.com/projects/css-sans/fonts. Makes it really easy to get what was being done.

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 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/... (this paper is a work of art!)

- https://www.metaflop.com/modulator (use the sliders)

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

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

I don't disagree.

This just reminds me of a very "gray hat" SEO project I dabbled with 8-9 years ago.

Back then we were grabbing dropped domains and rebuilding them in masse to harvest the search traffic and build an early "PBN." Not wanting to leave an obvious footprint for Google or having to build a ton of templates, we randomized everything. From generating logos on the fly to randomizing the html structure and css classes names an extra precaution.

The sites were ugly as sin, but since Google wasn't rendering CSS on every crawl it didn't matter.

Pair this with our monetization strategy that made extensive use of css's `content=""` to place large CTAs across different sites and this project reminds me of the lessons we learned back then.

Needless to say, this isn't a project I'm super proud of, but when I saw how non-accessible this CSS font was, I couldn't help but think about scrambling the class names as well.