Blokking In Your Designs

Blokk font preview
Consider using Blokk in your mockups

Recently a friend suggested I check out a font called Blokk. Blokk is aptly named, as it’s just a typeface of squares—if you’ve ever worked with somebody who was confused by Lorem Ipsum, the idea goes, replacing letter forms (and their loaded meanings) with a font like Blokk might help viewers focus on the design of the page and not just the content.

At this point most good designers I know do a lot of their work directly in the browser. I wouldn’t use Blokk while building a prototype, necessarily, but it could help to be able to quickly switch into Blokk when taking screenshots for client reviews. We made a quick bookmarklet for our designers to do just that:

  1. Download Blokk and install it on your computer
  2. Drag this link into your browser toolbar: BlokkIt
  3. Click the link to convert the active webpage to Blokk

To remove the font again, just reload the page. The un-minified code’s available in this gist.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.