

Keep your wireframes free of distracting Lorem Ipsum - jpadilla_
https://github.com/christiannaths/Redacted-Font

======
greenyoda
Judging by the examples, the script fonts appear to have been designed to have
realistic characteristics such as uppercase letters and a variety of heights
in lowercase letters. But what catches the eye is that none of the characters
have descenders (the part of the letter that descends below the baseline of
the text, like the bottom of a lowercase "j"). This would make it appear that
there's more white space between the lines than required, and detracts from
the otherwise realistic shape of the text.

~~~
mnicole
Very much this. I'd love a block-y looking one that included both ascenders
and descenders and had different widths for different lengths of words.

------
arkitaip
Better use actual copy which will allow you to discover the boundaries of your
design, e.g. margins, text size, text width, etc.

~~~
andrewmunsell
This is for wireframes, in which you probably shouldn't be obsessing over text
sizes and fonts.

~~~
pan69
Wireframes should be created around the content. Content should not be an
afterthought.

~~~
mnicole
This doesn't account for dynamic content.

~~~
pan69
Because dynamic content is simply made up, right?

------
justjimmy
Personally, I find the concept of lorem ipsum or blocked out letters redundant
- unless there is indication of what would be there.

The most basic wireframes will be just boxes everywhere and I label the boxes,
say 'Pricing Plan Feature'.

Next iteration, would be wireframe still but all the copy need to be clear and
thought out ie: the tag line would be 'Pricing Plan Feature' with a sentence
below it like 'Our Plan fits any budget, from $5/month to $100/month' and be
in that wireframe.

When people wireframe with lorem ipsum/line blocks, giving no indication of
what would/is there, it can create assumptions and confusion - for your team
mates/clients. If you say it's just for layout, then just use boxes with
labels - anything else is just distraction.

When I get the copy after the wireframe, it can be frustation to get handed an
essay and try to fit it in a space designed for a paragraph.

Always design around the content/copy, even at the wireframe stage. Knowing
the exact (or close to it) copy/content the better - allowing you to gauge the
layout and spacing more accurately.

~~~
a_c_s
The reason for using Lorem Ipsum is so the client can't waste time in the
meeting arguing about whether the lowest tier is $5 or if it should really be
$4.99, and if it should be phrased "$5/month" or "$5 per month", details that
are not relevant to the issues at hand.

~~~
justjimmy
If you're using lorem ipsum to communicate pricing ($5/$4.99), how do client
even know that's what it represents?

Wouldn't it be better if you put that $5/month and let them know upfront
copy/prices are not set - they are meant to communicate what that area is for
and how much space is dedicated to it.

What if you had in _your mind_ that the space is for $5/month, but used lorem
ipsum and designed around that.

Then the client hands you copy that goes '$5/month, $50/ year, Save $10 if you
subscribe annually / 20% off.' This will likely to have an impact on your
layout and spacing, since you just used 'lorem ipsum' in the wireframe step.

~~~
a_c_s
You clearly haven't worked with my company's clients :-P They don't listen
when you say the copy is filler.

There are also times (like in a small company) when the person reviewing the
wireframes is also the person reviewing the final copy, so if you put real
copy in there the meeting will always get sidetracked into a discussion of the
final copy unless you use some type of filler.

------
newishuser
The use of Lorem Ipsum is to have a place holder for your typography. With
this you're replacing your typography with unrelated glyphs. This is going to
make your mock-ups less relevant and is going to be harder to explain to your
clients.

Also the block font looks extremely heavy, would skew the hierarchy of the
page and be pretty distracting.

~~~
mnicole
Far too often, people nitpick on headers and sentences rather than the actual
element placement and overall structure of the page. This alleviates you from
having to deal with those situations until they are warranted.

~~~
vacri
Which is the exact same thing Lorem Ipsum was for.

------
stephp
Hmmm... yeah, I agree with some of the other sentiments here.

I personally don't find Lorem Ipsum distracting, and like others have said,
think it would be quicker and easier to troubleshoot design issues using real
copy. (The no descenders thing especially gets to me.)

If Lorem Ipsum is genuinely distracting to other people, though, then to each
his own! Glad there's options out there for everyone.

------
huhtenberg
You forgot the blurred version - redacted-quora.ttf

------
Samuel_Michon
Looks familiar...

 _"BLOKK is a font for quick mock-ups and wireframing for clients who do not
understand latin."_

<http://blokkfont.com/>

~~~
nwh
From the FAQ:

> Q: What's different about this compared to BLOKK?

> A: BLOKK has unusually large character widths, which adds much length to
> "standard" bits of dummy text, and also creates unecessarily ragged rags in
> my copy. Redacted solves this by using sane character widths; averaging
> character widths of narrow, regular, and wide characters of standard fonts.
> This gives a more realistic look to the text and helps it fit into narrow
> columns like real text would. Redacted Font also comes with script versions
> in two weights: bold and regular.

------
mmanfrin
When I did web design, one of my favorite questions I'd occasionally get from
a client was 'Why is my website in latin?'

------
endianswap
What exactly is distracting about Lorem Ipsum? I've never found it
distracting, and I've always found it super useful for mocking up layouts that
have responsive designs to see how the text moves around.

~~~
huhtenberg
When using a filler text, it takes a conscious effort to _not_ read it when
glancing through the page and instead try and perceive the filler as a layout
_filler_. So it only makes sense to replace the recognizable glyphs with
meaningless scribbles and eliminate that effort.

~~~
yuliyp
When you look at the page with text when it's done, you're going to be
focusing on the text too. Judging the page in a more realistic scenario makes
sense.

------
prolways
I can see the clients (and these are the same ones who get confused by Lorem
Ipsum) complaining that the "font is unreadable".

------
senorerik
A large portion of web design is the use of typography, making this largely
counterproductive.

~~~
sisk
The first part of your statement is true however this typeface is used during
a different phase of the design process. It even reads as such in the headline
("wireframes"). That'd be like suggesting mock responses are counterproductive
because a large part of building an application is in dealing with live data.
Sure, once your interfaces are hardened then you can worry about handling live
data but there is a time when all you're going to worry about is handling the
response. Similarly, there is a time in the design life cycle where a higher
level, "does this work" is valuable.

It's an appropriate tool for a _part_ of the design process.

~~~
senorerik
You are right, this can be useful during initial stages of the design process.
Counterproductive was a poor choice of word, let me better elaborate my
concern. I assume the use for this typeface is to present wireframes to the
client, free of "distracting lorem ipsum". I think showing clients any web
design that lacks a typographical direction is an omission of the majority of
the design in most all scenarios [1] and not fit as a representation for the
future of that design. My personal design philosophy for the web is to
accommodate the other aspects of the design to the typography, not to fit the
typography secondary to the balance created by the preexisting design.

[1]: [http://informationarchitects.net/blog/the-web-is-all-
about-t...](http://informationarchitects.net/blog/the-web-is-all-about-
typography-period/)

------
micheljansen
Nice, this looks much better than BLOKK.

------
HunterV
Coming from a designer that has worked a lot on magazine/newspaper design this
is absolutely helpful. I don't know how many times I've seen Lorem Ipsum be
glanced over and almost make it into the final print. This is great!

------
ZaneA
I've created a dead simple Chrome extension that uses Redact Script to block
out YouTube comments, <https://github.com/ZaneA/YT-Redact>

------
aed
Kind of funny considering that the whole point of Lorem Ipsum was to get rid
of the distraction of actual content in the first place.

