
CSS Sans – A pure CSS font - snyp
http://yusugomori.com/projects/css-sans/fonts
======
scotchio
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](http://codepen.io/ncerminara/pen/yFcfn)

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

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

~~~
saidajigumi
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](https://github.com/postcss/autoprefixer)

------
gklitt
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](http://yusugomori.com/projects/css-sans/archive)

~~~
jnem
Finally, a legitimate reason for IE 6 to exist.

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

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

~~~
emitstop
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.

~~~
le_lenny_face
>this is the stupidest thing I've ever seen

Lol obligatory XKCD!

[http://xkcd.com/1497/](http://xkcd.com/1497/)

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

[http://people.mozilla.org/~mclaypotch/CSS-
Sans/](http://people.mozilla.org/~mclaypotch/CSS-Sans/)

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

~~~
nunull
"can be copy+pasted"

[http://imgur.com/8SNbm0k](http://imgur.com/8SNbm0k)

------
Tomte
As usual, the S looks strange.

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

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

~~~
namanbharadwaj
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.

~~~
err4nt
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.

------
RazorX
<span class="N"></span> <span class="E"></span> <span class="A"></span> <span
class="T"></span>

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

------
nightcracker
The S looks out of place.

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

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

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

------
mobiuscog
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 ?

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

------
novaleaf
what would the practical usage of this be?

Honest question.

~~~
pcthrowaway
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.

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

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

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

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

~~~
Turing_Machine
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](https://github.com/Khan/KaTeX)

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

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

------
jradd
this is amazing!

------
sova
seriously just blew my mind with this.

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

~~~
staunch
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!

~~~
Moru
Skype! Mention Skype! :-)

------
steakejjs
You can already do regular fonts in pure css. See. Here's open sans in pure
CSS. [https://github.com/steakejjs/OpenSans-
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

~~~
Moru
I miss the html-pages of old times.
[http://motherfuckingwebsite.com/](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.

~~~
vortico
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.

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

~~~
Moru
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?

