Skip to content

xuv/curtis-less-typeface

gh-pages
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code
This branch is 19 commits ahead, 2 commits behind desandro:gh-pages.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
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">
  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.

About

Typeface made with CSS shapes (ported to LESS)

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 100.0%