
CSS Sans – A font created in CSS - lumannnn
https://yusugomori.com/projects/css-sans/
======
nickreese
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.

~~~
KillerRabbitt
While this may evade simple scraping bots, it's easy enough to render the page
then use some type of character recognition to get the content.

~~~
nickreese
I don't disagree. But the bot / tool rendering it would need to know to look
for it.

You could even pass around "not so hidden" messages with it. Tell your
friends, add this CSS class to the body to see the message.

Bulletproof, not at all. Just pointing out a clever use.

------
IMTDb
I am somehow disappointed that all the text on the website is not displayed
using the font itself :p

~~~
amthewiz
That.

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

~~~
jerye
Here's a 'C' without the white cut out using a transparent border-right.

[https://codepen.io/jeremyyeo/pen/eMaZmb](https://codepen.io/jeremyyeo/pen/eMaZmb)

------
actionscripted
This is awesome. Not everything built needs to be held to best practices and
these sorts of projects are what make the web exciting!

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.

------
svat
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/...](https://s3-us-
west-2.amazonaws.com/visiblelanguage/pdf/16.1/the-concept-of-a-meta-font.pdf)
(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
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).

~~~
foobarrio
We 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.

------
purplecones
Awesome. I love that you have a section showing exactly what CSS properties
are used to create each letter.

~~~
specialist
Hover over a letter's class to highlight the rendered stroke.

[https://yusugomori.com/projects/css-
sans/fonts](https://yusugomori.com/projects/css-sans/fonts)

------
dang
Discussed in 2015:
[https://news.ycombinator.com/item?id=9204111](https://news.ycombinator.com/item?id=9204111)

------
crispyporkbites
How outrageous, this site does not work with CSS disabled.

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

Edit: Found a demo page[1], it's monospaced.

[1] [https://yusugomori.com/projects/css-
sans/archive](https://yusugomori.com/projects/css-sans/archive)

------
rambojazz
It would be useful if you could add a LICENSE file in your repository.

------
dxxvi
Creative, not sure if it's useful. Is it easy to change the font size?

~~~
tuukkah
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/](https://jsfiddle.net/6cg8dLnz/)

~~~
tuukkah
Baseline is broken with _display: inline-block_ but works with _float: left_ :
[https://jsfiddle.net/eywwmL2o/](https://jsfiddle.net/eywwmL2o/)

Haven't figured out how to fix kerning if it's even supposed to work.

~~~
Izkata
Like this: [https://jsfiddle.net/95v642n6/](https://jsfiddle.net/95v642n6/)

    
    
      .font div {
        display: inline-block;
        vertical-align: top;
      }
      .H + .U { margin-left: 2px; }
      .U + .G { margin-left: 1px; }
      .G + .E { margin-left: -5px; }

------
onion-soup
What is next? OS written in CSS?

~~~
Shaddox
Someone's got you covered bro.

[https://codepen.io/ddietle/pen/zBjpVE](https://codepen.io/ddietle/pen/zBjpVE)

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

------
dubcanada
The coolest thing I think is that all os's render the text/font the same way.

------
moltar
Just because you can doesn’t mean you should comes to mind :)

But that aside - pretty cool!

------
hv42
reminds me of this nice icon project, where icons are also designed with one
css block: cssicon.space

------
dingo_bat
Your scientists were so preoccupied with whether or not they could that they
didn't stop to think if they should.

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

~~~
Jakob
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](https://yusugomori.com/projects/css-sans/fonts). Makes it really
easy to get what was being done.

