Photo-graphic (No YT! Steamy Disco)
D O G
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. This typeface was used in the article, Why Art?. Remarkably, Wagner Paula was able to build upon the framework I started in his Liveposter.
This design pattern is released under a Creative Commons Attribution License. You are free to share and remix this work. Link-back appreciated.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ? ! .
Q U I C K B R O W N F O X J U M P S O V E R T H E L A Z Y D O G