Most designers have experienced the moment in which the client asks, “that Latin text… that’s not going to be on the final design, is it?”

I’ve talked about alternatives to lorem ipsum in several articles, but none of the text generators I’ve shown solve this central issue: clients will always tend to read filler text as final body copy. Over the last month there’s been a number of number of interesting creative solutions to the problem: filler fonts that can take any random text input (including Lorem ipsum) and obfuscate it entirely, making the result perfect for wireframes and client mockups.

Blokk was the first of this type that I became aware of: a “redacted” typeface that turns all text into something that looks like it has been censored by the CIA. Handily, the font comes with web-ready versions, making it easy to use on mockups. Text rendered in Blokk looks like this:

The typeface turns text into something that looks like it has been censored by the CIA

Typically, the typeface would be rendered in a smaller size for a wireframe.

Christian Naths took the same idea, created a font called Redacted, and included a script version:

Redacted is a variation created by Christian Naths that includes a script version:

You could use these fonts in one of two approaches:

1. Install the font as a standard system typeface and use it in your tool of choice as a draft font, as you would any other. (Remember that you may have to rasterize the result for the client to see it, as they won’t have the font themselves.)
2. Use the typeface in a live web mockup, by embedding it as a web font:

@font-face {
	font-family: 'Blokk';
	src: url('BLOKKRegular.woff') format('woff'),
	font-weight: normal;
	font-style: normal;
}
p {
	font-family: Blokk;
}

Note that these fonts do not eliminate the text underneath – it’s still readable as words if the text is copied and pasted, or use View / Source in a browser. So don’t try cover up swearing at a difficult client by rendering it in Redacted.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.