CSS Sans – A pure CSS font | Hacker News Reader

CSS Sans – A pure CSS font

yusugomori.com

413 pointssnyp64 comments

This is really well done and polished. Great stuff. About a year ago when I was bored, I made a quick and dirty codepen [1] of the exact same thing you have here. I added a transition to it so you can type to switch the letters.

I also made it so you can type with pure CSS letters [2]. It's nothing great like what you've done, but I'd thought I would share anyways.

[1] http://codepen.io/ncerminara/pen/yFcfn

[2] http://codepen.io/ncerminara/pen/cEbGC

Woah the on keypress animations look awesome!

transitions are really nice, apply those to this font and you got something

The non-webkit-transform is missing on the .t::before.

I've come to love autoprefixer[1] on a current project for just this reason. It's a CSS preprocessor that deals with prefixing and property syntax changes across browser versions. Usage:

    1. Write unprefixed CSS
    2. Tell autoprefixer what browser versions to support
    3. It adds the correctly prefixed properties for you

Interestingly, autoprefixer uses the property support data from caniuse.com to determine what prefixes to apply.

[1] More info and link to interactive demo at: https://github.com/postcss/autoprefixer

Very cool! FWIW, it feels more responsive to react on keydown rather than keyup, IMHO: http://codepen.io/runeks/pen/PwxdEm

Very cool how this project uses the font face to explore how CSS rendering has evolved over time. I find it strangely beautiful when rendered in IE 6/7, almost like an alien language.

http://yusugomori.com/projects/css-sans/archive

Finally, a legitimate reason for IE 6 to exist.

Really cool exercise in CSS. My first thought is that texts displayed using this font can't be selected/copied & won't be screen reader friendly. Might make for a great way to display your email or phone number on a site without worrying it would get scraped by marketers.

Great idea. You could even generate a random mapping of the letters -> CSS classes on each load, making it very difficult for bots to decipher.

Would it really though? Bots can beat CAPTCHA.

They could just make a map of the class attributes. It would be easy.

Obviously it won't make it impossible to decipher, just harder (and perhaps not worth the effort). If the line order of each statement is also randomized and useless attributes are added, they'd have to pretty much compile the CSS and compare the attributes.

The alternative way to beat all email obfuscation techniques is of course taking a snapshot and running OCR on it, but certainly not worth the effort/CPU time.

Not as much effort as you might think. Command-line rendering of html (including css and js) and taking a screenshot is not very difficult. If a site used this method, and someone is highly motivated to break that captcha, the effort put in would be nothing compared to the benefit of bypassing the "security".

Actually, you could put a character inside the div and use the old "text-indent: -9999px;"-trick: Copy and screen readers fixed.

Screen readers fixed, but how are you going to select to copy?

If you can select to copy its no different than a screen reader. There's is 0 usefulness to this, and it's embarrassing that it's on the front page of hacker news right now.

I thought this too at first, but then I realize that an image would do the job just as well.

Seriously, this is the stupidest thing I've ever seen. Why are people pretending this would be useful in any way at all?

I see how its a fun exercise in CSS and everything, but actually providing it as a download as if people will use this productively is stupid.

>this is the stupidest thing I've ever seen

Lol obligatory XKCD!

http://xkcd.com/1497/

And if you want an infinitely scaling image, you could even use an SVG.

Nice idea. Even just preventing the information to get sucked up during search engine indexing and cached in the description can be a valuable side effect.

I have been trying to find out if the single-stroke text used by 'Hershey'text extension in Inkscape is visible to screen reader's/scraper's/bot. This type of text font is used in Blueprint's.

Here's another one; a bit more stylized and can be copy+pasted:

http://people.mozilla.org/~mclaypotch/CSS-Sans/

(GitHub: https://github.com/potch/CSS-Sans)

"can be copy+pasted"

http://imgur.com/8SNbm0k

As usual, the S looks strange.

No wonder Knuth dedicated a whole chapter to this one letter in "Digital Typography".

This is pretty cool. It's unfortunate that some characters (CGJQ) require masking with a background colour to get the desired shape. It would be nice if this could be resolved so this could be used on any background.

This might be viable using Sass or Less, since they have support for variables, nested selectors, etc. Although I'm not really a front-end engineer, so I don't know exactly what would be involved.

Sass or Less still output standard CSS in the end, which gets interpreted by the browsers. Anything written in Sass or Less would still have to work within the limitations of CSS.

Appreciate the meta css rules to explain on hover. Now let's build an ascii rasterizer on top http://imgur.com/VyEAzsm.

The S looks out of place.

This is the kind of stuff I come to Hacker News for! Inspirational, brilliant, beautiful, and awe-inspiring.

Very cool project but I fear that this approach will only work for relatively simple glyphs that can be broken down into 3 sections (main, :before and :after) whereas Chinese characters, for example, may take up a few dozen strokes.

I love this project, I think it is wonderful. I'm not sure of the practical usage but I don't care, it just strikes me as smart, and looks very nice.

A stupid question I imagine, but wouldn't em be more appropriate than px for the defined units ?

Couldn't the size be defined proportionally to the expected size ?

Very nice! Now for the lower case, should be easy. :)

what would the practical usage of this be?

Honest question.

Typography that maintains a relative width to the rest of the page content and scales with everything else. Similar to how it's desirable to use CSS shapes over images.

Would it be possible to use CSS to draw glyphs using data from Metafont source files?

KaTeX does a lot of interesting CSS tricks. I don't think it goes all the way down to the Metafont level, though.

https://github.com/Khan/KaTeX

this is amazing!

seriously just blew my mind with this.

Are there any advantages to using this over other methods for large text?

Also, can anyone think of any practical uses for this?

what about responsive logos, or as a basis for some responsive CSS illustration?

Anyone have an idea what that aberration is in the hook of the Q?

It cuts off the end of the tail. Also look at how the tail of the "J" is done.

At the risk of making an uninteresting comment -- I really love seeing cool/interesting work like this done by people who aren't devs in America. Not that there's anything wrong with American tech or devs particularly, but just that I feel like we're finally getting at the true promise of the internet.

Great work, Found the characters really consistent in style, and obviously functional.

There's nothing new about non-Americans creating amazing software. Linus Torvalds is Finish. Guido van Rossum is Dutch. Matz is Japanese. Fabrice Bellard is French. DHH is Danish. Tim Berners-Lee is English.

And that's just off the top of my head!

Skype! Mention Skype! :-)

You can already do regular fonts in pure css. See. Here's open sans in pure CSS. https://github.com/steakejjs/OpenSans-CSS

I've actually found its much nicer using this in my projects than using a font cdn or self hosting woff files.

I do like the minimalism of css rules to creating this font as opposed to having a giant data section. It's pretty neat

All that's doing (I think) is encoding the font file as base64. You're still using the font binary blog.

The link itself is actually drawing/creating the font itself in CSS. Different method entirely.

Yeah, it is only base64ing the woffs. The reason I post it is that it has all the benefits of this project (only CSS) without the downsides (being ridiculously hard to use).

Not that hard to use; just replace each letter with a span tag.

It's a simple regex substitution or map().

Not all the benefits. It requires web font support. I don't see this as a huge downside, but it is a fairly big difference.

is there any browser that supports transforms (skews), but doesn't support web fonts?

I wouldn't call that a pure CSS font, as it's just a Base64 encoded WOFF font embedded in CSS as a data URI. It can save you for that extra HTTP request, though, if you only need to support modern browsers which support WOFF fonts.

I miss the html-pages of old times. http://motherfuckingwebsite.com/ Just full of information. Or non-information. But full of it and not full of empty space or animated backgrounds that makes my cpu-fan convert to jet-engine.

Thanks for this link! I've always love reading GNU manuals in HTML because it relies on your browser's navigation, which is always better than what any website could implement itself. Ctrl-F is fast because scrolling is trivial and doesn't require a Javascript callback for every pixel scrolled, and without a CSS-customized div after every paragraph, you can load web pages containing 2MB of text just fine.

Indeed. My 16 MHz Atari could handle homepages just fine. My 1.8 GHz laptop has troubles now and then and we should not speak about my 2 year old quad-core phone.

Why don't you read GNU manual with `man` in a terminal? (Genuine question)

Have to open up a new window anyway if it is any sort of long man-page that needs reading while constructing the command in another window?

motherfuckingwebsite.com is considered harmful. Try this one instead: http://bettermotherfuckingwebsite.com/

That one sets sizes and width in pixels. This gets very tiny if you print it with something that doesn't auto-fix this... :-)

Reply on news.ycombinator.com