David Walsh Blog

Redacted Font

Back when I created client websites, one of the many things that frustrated me was the initial design handoff.  It would always go like this:

  1. Work hard to incorporate client’s ideas, dream up awesome design.
  2. Create said design, using Lorem Ipsum text
  3. Send initial design concept to the client with detailed explanation of why each piece should look the way it does
  4. Receive an email back with no comments except “I can’t read the text” or “Why is all the text Italian” or “This makes no sense”

Always a wasted interaction that got in the way of making progress on the project.  If only Redacted Font had been created back then.  Redacted Font obscures text into straight blocks so the text is illegible but the viewer gets the idea of where text will be without caring what the text actually is.  Here’s an example:

So how does Redacted Font work?  Essentially this project is just a bunch of font resources you can pull into your project.  You will add these fonts to your stylesheet like so:


@font-face {
	font-family: "Redacted";
	src: url("Redacted-Font/fonts/web/redacted-regular.eot");
	src: url("Redacted-Font/fonts/web/redacted-regular.woff") format("woff"),
	     url("Redacted-Font/fonts/web/redacted-regular.otf") format("opentype"),
	     url("Redacted-Font/fonts/web/redacted-regular.svg#filename") format("svg");
}

With the font available, you can use it to make text within the page look redacted:


.prototype {
	font-family: "Redacted";
	color: #999;
}

.prototype-script {
	font-family: "Redacted Script";
	color: #999;
}

Redacted Font comes with Regular, Script, and Bold Script variants and works at all sizes.

The amount of face-palming Redacted Font would have saved me back then is incalculable.   Redacted Font lets you create prototypes that represent real space without the hassle of real text.