Awesome. I love that you have a section showing exactly what CSS properties are used to create each letter.
[deleted]
CSS Sans – A font created in CSS
31–40 of 52 posts
Re: CSS Sans – A font created in CSS
#32This 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.
Re: CSS Sans – A font created in CSS
#33The coolest thing I think is that all os's render the text/font the same way.
Re: CSS Sans – A font created in CSS
#34Earlier quoted context omitted.
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 c…
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.
Re: CSS Sans – A font created in CSS
#35Earlier quoted context omitted.
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 c…
> 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...
Re: CSS Sans – A font created in CSS
#36Probably 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…
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 separat…
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.
Re: CSS Sans – A font created in CSS
#37Discussed in 2015: https://news.ycombinator.com/item?id=9204111
Re: CSS Sans – A font created in CSS
#38Creative, not sure if it's useful. Is it easy to change the font size?
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/
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.
Re: CSS Sans – A font created in CSS
#39Earlier quoted context omitted.
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…
> Society has much larger fish to fry.
I wish I had a dime everytime someone used this justification.
Re: CSS Sans – A font created in CSS
#40Earlier quoted context omitted.
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 c…
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.
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=“