Fonts for Wireframing

26 Apr 2013

With tools like Balsamiq being useful for lo-fi wireframing there is also the consideration of how you would like your fonts to display. Lorem Ipsum can be useful for test display of text but can also offer a layer of distraction to clients.

The default font in Balsamiq can be useful if your wireframes require actual text but to further abstract your wireframes down to a purely functional level the following fonts are available.

Blokk

http://blokkfont.com/

Described as

“…a font for quick mock-ups and wireframing for clients who do not understand latin.

Blokk Font Across Various Devices

Redacted

https://github.com/christiannaths/Redacted-Font

From Christian Naths comes Redacted, described as a font to

“Keep your wireframes free of distracting Lorem Ipsum.

and available in various versions.

Redacted Script

Fillr

And finally there is Fillr from PowerMockup

https://www.powermockup.com/blog/fillr-wireframing-font

“… a free dummy font that replaces actual characters with squiggly lines (heavily inspired by BLOKK, which uses blocks instead). FILLR makes dummy content immediately identifiable without distracting anyone with fake Latin.

Fillr wireframe font

Hopefully these fonts will offer you useful options when creating your lo-fi wireframes.

Changing the default font in Balsamiq

Useful instructions on how to change the default font used in Balsamiq are also provided by SitePoint here - http://www.sitepoint.com/wireframing-balsamiq-mockups/