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.

Other Design Articles You May Find Interesting

8 Comments | Write a Comment

  1. Veyr nice CSS example. Thanks for sharing the code!

  2. Azizuan says:

    free isn’t it?

  3. FAQPAL says:

    Excellent share, thanks for the tip.

17-09-2014 | Comments Off on Top 50 sport wordPress themes
18-06-2013 | Comments Off on 20 sets of free grunge photoshop brushes
21-01-2013 | Comments Off on Free futuristic fonts from urbanfonts.com
06-01-2013 | (2) Comments
24-11-2012 | Comments Off on Make your own business card for free
08-02-2012 | (1) Comment
  • Free Brushes
  • FudgeGraphics
  • CrazyLeaf Design Blog
  • Fuel Your Creativity
  • Photoshop Tutorials and Design Resources
  • touch up photo retouching services
  • Small House Design
  • http://www.webbuildersguide.com/
Follow My Twitter Subcribe Full RSS