SEO

May 1, 2011

Curtis CSS Typeface

R

VIDEO

Photo-graphic (No YT! Steamy Disco)

D O G
via desandro.com
Curtis is the name I’ve given for a family of geometric sans-serif fonts currently in development. Other incarnations exist as Fontstructions: Curtis Heavy and Curtis Pixel 14. This version takes form in CSS. All shapes are rendered by the browser, using a combination of background color, border width, border radius, and a heavily reliance on absolute/relative positioning. You can get a better idea of how the letters were formed with the Inspect display option.

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.

R
Font size
Display options

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

R Photo-graphic (No YT! Steamy Disco) D O G via desandro.com Curtis is the name I’ve given for a family of geometric sans-serif fonts currently in development. Other incarnations exist as Fontstructions: Curtis Heavy and Curtis Pixel 14 . This version takes form in CSS. All shapes are rendered by th ...»See Ya
at