Ideal Fonts for Wireframes and Mockups

by Vishal Mehta on March 11, 2013

in Design, Solutions, Usability, Web Design

Wireframes and Mockups

Even though starting with design without the content is a bad approach to web design, we have to accept that it is a common practice. Without content in place, Designers usually pick something from the existing website OR put some generic text OR most-commonly use the Latin script “Lorem Ipsum.”

What happens is – it’s challenging to use series of words (that are not final or just dummy) and get the desired symmetry in say a block of text created in the visual mockup.

Someone thought of a solution! Thanks to Tom from Norway, who designed a simple and crisp “blocks” based font particularly to use during wireframes and mockups stage. The font name is: BLOKK and available for download as both TTF and Web fonts. Each character typed using this font, generates a rectangular glyph, which looks like a block of text seen from afar; also forcing the client to not focus on the text, only the design.

High usability, Tom!

Here’s how it looks:

blokk It’s very easy to control the start and end to allow the designer to quickly get away with the blocks of text and spend more time on design.

Inspired by BLOKK font, Christian Naths created a open source project, where he developed another font. He gives Tom credit for his inspiration, and develops some “scripted” variants of blocks of text, that designers can use. Text that looks like text, not blocks, but something that’s easier to do and control. The output still looks like a blurb watched from far off, which works as desired. His font name is Redacted Font – available for download here (you can view the examples before downloading).

Interesting micro-innovations.

Vishal Mehta

Vishal Mehta

Vishal Mehta is a usability professional who loves to play chess and has a strong eye for details. He's also the CEO of IDYeah Creations, a UX practice in Pune, India. Vishal is also a guest blogger on UXBooth, Technorati, BlogCritics, and SAP Community Network.

More Posts - Website

Follow Me:
TwitterFacebookLinkedIn

{ 2 comments… read them below or add one }

Chris Gutierrez March 12, 2013 at 4:30 PM

Looks very nice for mock-up.

Thanks for sharing!

Vishal Mehta Vishal Mehta March 12, 2013 at 6:19 PM

Thanks Chris. I certainly found this useful; a very recent discovery – just days ago. Hope the information is helpful to you too.

Leave a Comment

Previous post:

Next post: