Top font families for wireframing low fidelity UI design
Speed is essential when designing low-fidelity wireframes for UI concepts. Low-fidelity wireframing uses basic shapes and emphasizes layout over aesthetics. Text, as a component, becomes increasingly important based on the wireframing phase. This article delves into the most popular font families for text in the early stages of UI design or during mockups.
Note: This article focuses only on font families that are opensource and free for commercial usage.
"Architects daughter" font for Hand-written Style
If your UI wireframes involve sketchy style like as though they were hand-drawn on a piece of paper, then typically it is best to select a font-family that comes with hand-written typeface. There are many popular font families that mimic hand-writing, of which "Architects daughter" is a great choice for this purpose. It was designed Kimberly Geswein.
It gives a natural feel to the wireframes and conveys the message to the user that the drawn design is rough, and just a sketch. However since "Architects daughter" is a real font there are some drawbacks to consider, it might not have all character sets when it comes to non-english representation. Since most low fidelity wireframing does not focus on actual text content, there are many chances that the designer will resort to "Lorem ispum" kind of dummy text. When using "Architects daughter" this dummy text will be exposed in the design.
Here is an example UI design created using "Architects daughter" font-family
For more information visit this link
Redacted - font families for mockup style
Redacted is a group of font families designed by Christian Naths that comes with two distinct styles. As an alternative to boring lorem ispum or other dummy text , this is a nice alternative for depicting text in low fidelity wireframes. They are non-readable text which means it does not matter what is the text content. Although you have adjust the text to suit your preferred content length. It comes with the following types:
Redacted Regular:
It is blocky style. Text is represented as rectangle blocks based on its length. Could be used in wireframes that have straight lines and outline wireframes.
Redacted Script:
It is a cross-over between blocky and handwritten. Text here is represented in wavy non-readable hand-writing pattern. Suited for sketchy or hand-drawn look UI designs. The script alone comes with three weights: Regular, Bold and Light. This allows combination of mockup text styles to differentiate between headings and paragraphs.
To download the font, visit its github link.
Blokk font family - Mockup Style
One of the top font families used for ideating UI. Blokk font family is a great fit when designing lo fi wireframes. Although it appears similar to redacted font regular style, It provides word breaks to give a better representation of its underlying text content. It was designed by Los Gordos.
MockFlowFont - Typeface for lo fi wireframes
MockFlowFont is a font-family created from scratch with the right font-metrics for lo fi wireframes. It is an open source font released by MockFlow - the creator of popular wireframing software of the same name.
Like Redactor and Blokk, this font follows the same principle of covering up the text content with redacted symbols. It comes with two variations.
"MockFlowFont1" - Mockup style that shows words with spaces
"MockFlowFont2" - Cleaner Mockup style that only shows sentences
When compared with other block font styles, The font styling in MockFlowFont is more smoother and visually pleasing. For example it avoids very short text, gives rounded edges and better word and line spacing irrespective of the text content used.
Font can be downloaded here
Conclusion
There isn't a definitive best font family; it's about selecting the appropriate font for each situation. All the fonts mentioned above have open source licenses and are free for commercial use. Opt for "Redacted Script" or "Architects Daughter" for sketch-style wireframes. Use MockFlowFont for low-fidelity outline wireframes.
Credit: The wireframes shown in this article were created using MockFlow Wireframe software. You can try for free.