4 ms·
A typeface designed using only CSS3
- jayphelps 17y agoCool stuff. He obviously said it wasn't intended for production, but the major issue that comes to mind is SEO since engines won't see the text as actual text. Really cool proof of concept though.
- shard 17y agoNot being able to select/copy text is pretty annoying too.
- Zev 17y agoYou can copy the text. It just doesn't have the outline to show you what's selected. Which is quite annoying, yes.
- ElbertF 17y agoSearch engines will see the actual text, it's just hidden with CSS. You can see it when you turn off CSS (Firefox: view -> page style -> no style).
- jayphelps 17y agoMissed that, thanks for the heads up! Now my only issue would be that the text-indent: -9999em method has been known to get you flagged for spam for obvious reasons. But I'm being facetious. I like to play devil's advocate. :o)
- Groxx 17y agoCould definitely be useful for hiding email addresses while leaving it completely readable.
- uggedal 17y agoThe text is still readable by bots. Turn off CSS on the demo page.
- pavlov 17y agoEach character is wrapped in a <span> tag. I would imagine most address collector bots don't bother to actually parse HTML, so they would be thrown off by that. Of course, if that's the case, then the <span> trick can be used on its own without a CSS font at all.
- Groxx 17y agoOnly because he actually includes the text in the outer span tag. It's entirely unnecessary for display purposes. Remove that, and bots would have to do OCR.
- greyhat 17y agoAmazing. Check out his other stuff too, this guy is some kind of crazy browser genius. And I mean that in the greatest possible way.
- haydenchambers 17y agoShould do jq plugin. $('h1').desandro({'face':'curtis'});
- nathan82 17y agoAww jeez this sucks. Version of the same concept, work in progress: http://nathanhackett.com/front.html http://nathanhackett.com/front.html Serves me right for not launching earlier. Anyway kudos, very impressive. He's taken a similar approach to me, generalising the common letter shapes into sets of css rules. Mine's designed to allow for image or gradient textures on the letters, and degrades gracefully on older browsers (loses its curves!). His is way prettier though.