CSS Sans – A font created in CSS | Hacker News Reader

CSS Sans – A font created in CSS

yusugomori.com

180 pointslumannnn47 comments

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.

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.

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.

It’s fairly trivial to quickly animate each letter or stroke to flicker at a random high speed interval so anytime a render captures a screenshot you get garbled incomprehensible text.

Honestly, there are much better tricks for steganography if that's what you want. The very fact that this renders as human-readable text with a standard web browser pokes a huge hole in the problem of keeping it secret.

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.

That’s not "gray hat", that’s entirely black hat, utterly immoral, and purely malicious.

And honestly, we as society should do anything to eliminate people doing this.

Well that went from 0-60 in no time. Society has much larger fish to fry.

No one was harmed in this endeavor. Sure it "polluted the web" and was against Google's guidelines, but we definitely weren't hacking or doing other true "black hat" things.

Ultimately it was shut down in 2012 and in the entire time I was involved in this 2 people requested their domain back and we sent it their way no questions asked.

Content was generated with our internal equivalent of a markov chain, so there wasn't content piracy either.

Sure, this project added no value to the web and we should have spent our time building an awesome service that generated links naturally... but as they say hindsight is 20/20.

> Society has much larger fish to fry.

I wish I had a dime everytime someone used this justification.

Great and interesting comments anyway.

As much I would call me a white hat, I guess most of us have done we're not proud of in the past.

I for one used to work a very short time at a small dating portal that used like any available way to get users to pay.

thanks for sharing this, it's good to know what's out there, hope you have found a vocation :)

Virgil led Dante down into the next layer of Hell, past the rapists, murderers and thieves.

“And here...” he gestured “...is where they torture people who place CTAs in a css content=“

> Pair this with our monetization strategy that made extensive use of css's `content=""` to place large CTAs

Ah, it was you!... Whenever I searched for an obscure word and one of these sites cropped up, I was wondering what the monetization strategy for this garbage was. Now I finally know...

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

That.

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.

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

https://codepen.io/jeremyyeo/pen/eMaZmb

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.

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

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.

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

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

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

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

https://yusugomori.com/projects/css-sans/fonts

Discussed in 2015: https://news.ycombinator.com/item?id=9204111

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

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

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

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

Probably not, but it's an interesting concept.

You could probably write a script to have it scale down by a factor of whatever you wanted - you can see the CSS required for it on the page there.

    <div style="transform: scale(1.6);">
      <div class="A"></div>
      <div class="B"></div>
    </div>

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/

Yeah, that really surprised me: for a font in particular, why wouldn't you use em? (Is there a benefit to using pixels that I'm overlooking?)

Baseline is broken with display: inline-block but works with float: left: https://jsfiddle.net/eywwmL2o/

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

Like this: 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; }

What is next? OS written in CSS?

Someone's got you covered bro.

https://codepen.io/ddietle/pen/zBjpVE

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.

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

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

But that aside - pretty cool!

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

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

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.

They used CSS to create the font (presumably as an art project?), but it is available in plain OTF/TTF format, so it can be used as a normal font and doesn't need to be a barrier to accessibility tools.

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.

Reply on news.ycombinator.com