CURTIS CSS TYPEFACE

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

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 .