Snap-it

A monospaced font without curves.

The Snap-it font was born from a project we worked on for quite some time, we wanted to create a publication entirely built with CSS print, and let the reader print he's own book. It's now available: our label Objet Papier's 7th issue: Print-it. With it our font is also out and available to use and modify. One of our main inspiration was the Avara font from Raphaël Bastide, we wanted to use it for titles and design a body copy font to match it perfectly. We were talking about computers and print on demand so a monospaced was the go to choice, in reference to typewriters and computer terminals.

./highlight/trouble-with-the-curve.svg

./feature/terminals.html

Like the internet, our dream typeface was serious ans fun at the same time, the no curve design helping the serious and brutalist look, we added broken terminals for the fun part. Ascending terminals are snaped one time, looking like a "cartoon haircut", and descending are snaped twice for a "dancing look".

./feature/terminals.html

./highlight/grid.svg

./feature/inktraps.html

Letting the readers print our mag themselves was a great challenge in creating an experience that could work on any printer. Font legibility can vary a lot between printers, depending on their print precision. One of our choices was to add inktraps to the Snap-it font, to make it as legible as possible in small sizes and when printed in poor quality.

./feature/wip/italic.js

The Italic is
in the works.
Rotated characters
for now.

HTML
        
<span class="ital">
  This text is italic
</span>

SCSS
          
.ital {
  display: inline-block;

  .italic-letter {
    display: inline-block;
    transform: rotate(15deg);
    min-width: .62em;
    height: .8em;
  }
}

JavaScript
          
const ital = document.querySelectorAll(".ital");

for (let i = 0; i < ital.length; i++) {
  const italElement = ital[i];
  italElement.innerHTML = '<span class="italic-letter">' + italElement.innerHTML.split('').join('</span><span class="italic-letter">') + '</span>';
}

./sandbox/try-it.js

Font Size

Letter Spacing

Line Height

My well being is
depending on the presence
of a computer in the room

./galery/glyphs.html

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890.,;:?!(){}[]""''°-_@%…≥≤^~≠=÷−+¥£€$¶`¨´°—«»"'՚\/|#*•¿¡ÁÂÄÀÃÆÇÉÊËÈÎÏÌñÔÖÚÛÜÙŸâäàéêëèïìôöûüùÿ