Wednesday, March 17th, 2010
A typeface created in CSS
David Desandro has developed a newtypeface family named Curtis and done so in an interesting way…. using CSS:
Each character is wrapped in a <span> and then depending on the complexity of that character, more empty <span> elements are added to the markup to render each shape. Here’s the markup for R:
<span class="css_char r"> R <span class="inside split_vert"></span> <span class="outside split_vert"></span> <span class="stroke"></span> <span class="fill"></span> </span>The Curtis CSS font wasn’t conceived of any practical application. I was more interested in seeing if it could be pulled off, and if so, what the final result would look like.
Fun and crazy!





A bit on the old side but cool. It’s like a year old now.
That’s brilliant. And the CSS isn’t even that complicated. I really hope he generated it rather than hand-coding…
This is kind of neat actually, it could be used to display text on the screen that you didn’t want spambots to be able to crawl. Of course you wouldn’t be able to copy or paste the “text”, but it’d be good just to get text onto the screen.
Hadn’t seen the technique before – nifty. Can see it being the beginning of a css only sIFR replacement.