Skip to content
Go to file
This branch is 19 commits ahead, 2 commits behind desandro:gh-pages.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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">
  <span class="inside split_vert"></span>
  <span class="outside split_vert"></span>
  <span class="stroke"></span>
  <span class="fill"></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.


Typeface made with CSS shapes (ported to LESS)



No packages published


You can’t perform that action at this time.