Cool Curtis Typeface Built with Pure CSS

Curtis CSS Typeface is founded by David Desandro, a graphic and web designer living in Arlington, VA. The thing so special about Curtis font is that all the letters take their forms in CSS. Every shape is rendered by the browser, using a combination of background color, border width, border radius and absolute/relative positioning. Below is a sample markup for the letter R (quoted from desandro.com):

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

This is an overview of all the alphabets created.

And here is showing the basic CSS shapes that form up each alphabet.

To get a feel of the real simulation? Head over to the portfolio site of David Desandro!

There are also other incarnations of Curtis. If you wish to use the fonts in your digital artworks, they can be found at Fontstructions as Curtis Heavy and Curtis Pixel 14. Note that you will need to register before downloading the fonts.