Typeface made with CSS shapes (ported to LESS)
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 19 commits ahead, 2 commits behind desandro:gh-pages.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
curtis.css
curtis.less
font-color.less
font-shape.less
grid.png
index.html
layout.css

README.md

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.