O'Reilly

Redacted Font

By on  

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:

Redacted Font

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.

Track.js Error Reporting

Recent Features

  • 9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

Discussion

  1. Nice! It removes a distraction from the client so we can focus on the matter at hand. I am going to add this to my framework. No more being caught with Samuel L Ipsum on a mock-up.

    • Haha, I can relate to that all too well. Mr. Jackson has given me more than a few awkward moments.

  2. But it doesn’t work on the hosting. Why? missed configuration?

  3. MaxArt

    I’m foreseeing the client complaining: “Why can’t I read the text? That font is terrible!” or “Where’s my text and what are those strips?”

  4. Great idea. Can’t wait to try Redacted font.

  5. Mitnick

    why bother importing a font? You can do the same thing with unicode

  6. The fun thing is that Italians say “Why is all the text in English” :)

    Thank for sharing

  7. Brilliant!

    @maxart The font is “scribbly” enough for it to be obvious that it’s just filler text. We hope.

  8. NICE!! you wouldn’t believe the amount of times a Client has said “I like the design, but not sure about the Italian text starting with “Lorem”, can we make it English please!”

  9. EMiner

    This is one handy font. BTW – I discovered an interesting thing about it when I was working in Illustrator:
    if you go to Type and click Create Outlines the solid lines will change into blocks that are the size of the words in the line….very nice if you want to see how word spacing looks…very nice indeed!

  10. Chris

    I used this for body copy on a production website and let’s just say the readers HATED it.

  11. Daniel

    Um, I don’t think this is a very good idea, since typography is such a big part of any design. You just have to explain to the clients that the text is placeholder text. You can’t really judge a design if you can’t see the typography.

  12. I agree with Daniel. Typography is part of the design (always was, but especially these days that we have all these web font choices) and most clients will be distracted by the blocks and complain about them.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...

  • Hotjar &#8211; All-in-one Analytics and Feedback

    Website analytics are a massive business -- the more data you can collect with regard to your users' behaviors on your site, the more you can increase and maximise conversion...and increased conversion is always good.  Sometimes increase conversion means more money, improved user experience, viewer retention,...

  • Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn’t matter whether they’re functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they’re artistic representation pushing the limits of...

  • Collaborative Editing in JavaScript: An Intro to Operational Transformation

    I've set out to build a robust collaborative code editor for the web. It’s called Codr, and it lets developers work together in real time - like Google Docs for code. For web developers, Codr doubles as a shared reactive work surface where every change is...