6 ms·
CSS Sans – A font created in CSS
- purplecones 8y agoAwesome. I love that you have a section showing exactly what CSS properties are used to create each letter.
- deleted 8y ago[deleted]
- specialist 8y agoHover over a letter's class to highlight the rendered stroke. https://yusugomori.com/projects/css-sans/fonts https://yusugomori.com/projects/css-sans/fonts
- dxxvi 8y agoCreative, not sure if it's useful. Is it easy to change the font size?
- bojanvidanovic 8y agoProbably not, but it's an interesting concept.
- deleted 8y ago[deleted]
- Mononokay 8y agoYou 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.
- helb 8y ago<div style="transform: scale(1.6);"> <div class="A"></div> <div class="B"></div> </div>
- tuukkah 8y agoYou 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/
- Steuard 8y agoYeah, 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?)
- tuukkah 8y agoBaseline 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 8y agoLike 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; }
- _sdegutis 8y agoPretty 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 8y agoHere'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
- dingo_bat 8y agoYour scientists were so preoccupied with whether or not they could that they didn't stop to think if they should.
- onion-soup 8y agoWhat is next? OS written in CSS?
- Shaddox 8y agoSomeone's got you covered bro. https://codepen.io/ddietle/pen/zBjpVE https://codepen.io/ddietle/pen/zBjpVE
- rambojazz 8y agoIt would be useful if you could add a LICENSE file in your repository.
- IMTDb 8y agoI am somehow disappointed that all the text on the website is not displayed using the font itself :p
- amthewiz 8y agoThat.
- nickreese 8y agoThis 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 8y agoWhile 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 8y agoI 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.
- matte_black 8y agoIt’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.
- ajross 8y agoHonestly, 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.
- nickreese 8y agoI 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.
- RubenSandwich 8y agoHow 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
- TheAceOfHearts 8y agoFuck 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.
- sspiff 8y agoThey 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.
- Jakob 8y agoNope. 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.
- crispyporkbites 8y agoHow outrageous, this site does not work with CSS disabled.
- calypso 8y agohttps://i.imgur.com/yNlQWRM.jpg https://i.imgur.com/yNlQWRM.jpg
- svat 8y agoProbably 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/the-concept-of-a-meta-font.pdf https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/... (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 8y agoTo 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 8y agoWe 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.
- ibdf 8y agoSo 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.
- actionscripted 8y agoThis 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.
- dubcanada 8y agoThe coolest thing I think is that all os's render the text/font the same way.
- dang 8y agoDiscussed in 2015: https://news.ycombinator.com/item?id=9204111 https://news.ycombinator.com/item?id=9204111
- hv42 8y agoreminds me of this nice icon project, where icons are also designed with one css block: cssicon.space
- deleted 8y ago[deleted]
- moltar 8y agoJust because you can doesn’t mean you should comes to mind :) But that aside - pretty cool!