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:

  1. <span class="css_char r">
  2.     R
  3.     <span class="inside split_vert"></span>
  4.     <span class="outside split_vert"></span>
  5.     <span class="stroke"></span>
  6.     <span class="fill"></span>
  7. </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!

Posted by Dion Almaer at 8:17 am

3.8 rating from 36 votes


Comments feed TrackBack URI

A bit on the old side but cool. It’s like a year old now.

Comment by JonGretar — March 17, 2010

That’s brilliant. And the CSS isn’t even that complicated. I really hope he generated it rather than hand-coding…

Comment by Skilldrick — March 17, 2010

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.

Comment by starkraving — March 17, 2010

Hadn’t seen the technique before – nifty. Can see it being the beginning of a css only sIFR replacement.

Comment by functionform — March 18, 2010

Leave a comment

You must be logged in to post a comment.