demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Vengeance On Lorem Ipsum: Three Draft Filler Fonts

tools / typography

Estimated reading time: 1 minute, 51 seconds

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:

a “redacted” typeface that turns all 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:

… while fillr generates lines of text as freehand squiggles.

while fillr generates lines of text as freehand squiggles.

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('/assets/fonts/BLOKKRegular.woff') format('woff'),
url('/assets/fonts/BLOKKRegular.ttf') format('truetype'),
url('/assets/fonts/BLOKKRegular.svg#BLOKKRegular') format('svg');
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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.