When you’re doing a design prototype, it’s common to use the actual fonts the design will use, but use “lorem ipsum” text. The idea being to not distract anyone with real words when they are supposed to be looking at the design. Or you just don’t have any real text to work with at that point. That might be controversial as working with real content as soon as possible might lead to better designs, but ya know, c’est la vie.
When you’re wireframing though, you’re almost pre-design prototype at that phase. You might still be in Figma or the like though, so what font do you choose then? I love the idea of using a font that just references the idea of type being there, but isn’t actual letterforms. That way you still get the sizing and reflowing and everything of real type, without worrying at all about the actual text. I had trouble finding something (I kept looking for “squiggle fonts” and not finding anything.) So now that I have found them, I’m linking them up:
- Redacted Script on Google Fonts by Christian Naths
- Flow Block on Google Fonts by Dan Ross
- FILLR on PowerMockup by Andreas
- BLOKK on GitHub by Los Gordos
I used Redacted for the graphic I made for this post.
