Curtis LESS Typeface

Curtis is the name given by Dave DeSandro to a family of geometric sans-serif fonts. Other incarnations exist as Fontstructions: Curtis Heavy and Curtis Pixel 14.

The Curtis LESS Typeface, which is based on the Curtis CSS font, takes form in CSS compiled from LESS for added parametric options. All shapes are rendered in the browser, using a combination of background color, border width, border radius, and a heavily reliance on absolute/relative positioning.

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 typeface is an original project by Dave DeSandro. The Curtis LESS typeface is an adaptation of Dave's work by Julien Deswaef using LESS with the intention of having more flexible font sizes and colors while keeping all the original ideas from the Dave's design.

This design pattern is released under a Creative Commons Attribution License. You are free to share and remix this work.