BLOKK – A font for clients who don't understand lorem ipsum | Hacker News Reader

BLOKK – A font for clients who don't understand lorem ipsum

blokkfont.com

214 pointsGarbage65 comments

I like to advocate against using placeholder texts most of the time. The problem is often that designers/developers have to create a page with some content on it, but they don't know the content yet. They know a bit what it's about but the real texts on the page are not ready yet. Then they use Lorem Ipsum or something else.

This is wrong from the start. Before designing a page, you should know what the content is gonna be. The content should then decide what the design is gonna look like. Essentially, content is part of the design.

Designs that used placeholder texts like Lorum Ipsum can also fail, because the real texts turn out to be much shorter/longer than the placeholder text. Or the text is really something else than the designer/developer expected. Or the designer placed some cool text box somewhere but nobody has an idea what kind of content they should put there. This often results in useless texts appearing on the page because the design demands it. Or the other way around, the product owner wants to add a certain text somewhere, but there's not really a place for that in the design, often resulting in an ugly/quick fix.

In the end it is all about the content. The design is to complement the content. So I think generally the best approach is to start with the content, then create a design to complement the content.

Of course, in some situations it's not possible, but if you can, start with the content!

Oh man, if only it was a perfect world right? If I had the content I could complete so many of my to-dos. But no, I'm sitting here waiting for the boss to get me the content.

I'd love to have the content first, but it's just never going to happen.

This is your own fault. You've made your "boss" believe that you can complete designs without content for so long that he now expects it. You should try re-framing the conversation. Something like:

— SCENE: BOSS TYPING FURIOUSLY, YOU KNOCK ON HIS DOOR AND HE INVITES YOU IN.

BOSS: "We need this design for our new sprocket page as soon as possible - We're going to market in two weeks and need a landing page for our Google AdWords campaign"

YOU: "Awesome! The new sprocket is going to be huge for our company. What would you really like to focus on for this page? I want to make sure to prominently feature the most important things."

BOSS: _excitedly lists a dozen things_

YOU: Wow - this thing is really great. It's going to be a huge benefit to our customers. How can we show them the three things they're going to react to instantly?

BOSS: "Well my favorite is the gizmosis feature. It makes it so you don't have to flim-flam any more!"

YOU: "Woah. That's really cool! I'll make sure that is billed highly. Anything else you can thing of that sticks out in your mind?"

BOSS: "That's the only thing that sticks out. I do have this detailed list of features here"

YOU: "Please do send that to me - I'll try to make some sense of it. If you think of anything else really important, just email it over to me. I'm going to start putting all of these features into the design tomorrow morning - so make sure you let me know by the end of the day! I can't wait to get this page up for our clients to see - it's going to be a huge win."

BOSS: "Excellent. I'll send over any additional thoughts I have with that document right now. Thanks."

— END SCENE

Framing the conversation is important. Seeing yourself as the boss's advocate is important. You're working toward the same goal. The content is more important than your design. Accept that.

It's my own fault he wants to see what it will look like before signing off on something? Yeah ok. http://i.imgur.com/seh6p.gif

Nope. It's just your fault the you've told him "this is what it will look like" before having the content. It's not the truth.

EDIT: He's not going to "sign off" on it until the content is in anyway… right?

I'm willing to bet many people have "signed off" on things before there was content.

People seem to forget that lorem ipsum is not a new thing, it's been a part of design for decades. It is an accepted practice during design phases of a project, whether digital or print.

You forgot the laugh track indicators.

This assumes that "the boss" is all knowing about all of the content, which in my experience is very rare.

However, "I need a mockup by the end of the day" is very common.

One thing that's worked for me is to make up gibberish text that matches the general contours of the eventual content. For example, a "call to action" phrase at the end of marketing copy might look like:

"See can good great. Imperative, yes."

The problem with that is that when you are launching the site at the 11th hour, the content editor will overlook this because at first glance it looks like English. Not saying that happens often, but it this makes it a lot easier to happen. I actually like this Blokk thing specifically because it is not text. You can't mistake this for proper content.

In my experience, when doing user acceptance testing, the user will only ever give a maximum of X comments. If there is copy on the page, especially FPO, most of the comments will be around this copy since this is something that they understand.

I am able to get much more valuable feedback when using copy that is obviously not final.

> that used placeholder texts like Lorum Ipsum can also fail, because the real texts turn out to be much shorter/longer than the placeholder text.

In many cases, the content is dynamic, so the design has to be able to handle many different content lengths.

I used to work for a small web agency. Clients would buy websites all the time without having a clue what the content was going to be. Occasionally I'd say "We can't start work until you provide us with content." Most times it was a deal killer: the client wouldn't sign the contract unless they saw the design first. In other cases, the client would promise to find content, but never deliver. I can't tell you how many blank websites we billed out after waiting for months with no content.

Because clients dragged their feet on getting us content, most of our sites had to use placeholder texts. The client would delay content until the last minute. Then, as always, we'd get some shitty word document with content that didn't fit into our design. Text was crammed into places it didn't belong. Feature boxes were created for content that didn't exist. A design disaster. But clients loved it. And it got contracts signed.

If you're a freelance designer, team up with a good copywriter. 10% of the time, the client will agree to have their site written by a professional, you'll get content on time, and everyone will be happy. The other 90% of the time, the client will try to save money by writing it themselves. They will either write an indecipherable crap-pile, or absolutely nothing. These are the clients that pay your salary. And that's why placeholder text will always exist.

The only scenario you forgot to outline is when the CEO of the company that hires the small agency writes the content. Sometimes, this can be great - if that CEO is also an author, has years of copywriting experience and say, has sold tens of thousands of books.

Usually, that's not the case. Then the CEO hires the design agency, who wisely uses Lorem Ipsum or similar. Then, you might have an internal marketing manager who knows the CEO's copywriting skills suck. The agency also knows this, but, because it's a "Startup CEO," who's got some BS claim to fame, they write it anyway.

Screw the people who say the CEO's copy sucks, etc. Do you know how that scenario plays out? The board steps in, if they have any brains, and fire the CEO who can't copywrite but insists on wiping their arse with the whole thing. In this scenario, too, the agency simply takes the money and watches, waits for the internal marketing manager (usually, the guy who hired the agency) to get a new job or get fired. Then, the startup goes down in flames.

The best part? The agency still got paid. Sometimes, you can't save a client from driving themselves over a cliff. Take the money, smile, do the right thing and give them the best possible advice. But, don't sit still and do zero whilst the company drives themselves off a cliff. Especially when they pay you all the way down until they combust.

I work for a very large company, and have worked both freelance and in-house previously, and I can count on, ooh, maybe two fingers the times I haven't been in the situation. Unfortunately never had access to a copywriter, just access to endless frustration.

(Also, re the op, on-subject placeholder text works far better than Blokk, it's not particulary likely that you won't have at least an inkling of the subject of the design being undertaken)

This is not at all helpful, because the blocks are too "dark", in the sense that bold font is "darker" because more "ink" is used.

A lorem ipsum font would be a font which looks like ASCII until you actually read it. Maybe using something like kyrillic (Кириллон алфавиты глаголицæйы тæваг дæр зыны, фæлæ йæ дамгъæтæй фылдæр бердзенаг алфавитæй сты) would be a good idea.

(disclaimer: I have no idea which language the above example is. Only random Wikipedia clicking.)

edit: the Redacted font others mentions is better

Using Cyrillic text this way might end up running into the same problem that the creator of this font describes: designers' clients might feel that they're supposed to be able to understand it, but can't. So they might still complain that the text of their site/product/etc. has been replaced with something unintelligible, much as they seem to do now with lorem ipsum mock-ups.

The use of æ in your Cyrillic text suggests Ossetian, like in the Ossetian word дæр dær 'and'. Ossetian is the only language that uses the character æ in its Cyrillic alphabet.

https://en.wikipedia.org/wiki/Cyrillic_alphabets#Summary_tab...

So why won't they complain about the fonts being broken and being replaced by bars?

I bet they'll complain about that too!

The correct thing to do is determine how much of the complaints you get have to do with lorem ipsum, or if a little bit of additional explanation might be useful for your new/prospective clients when they see the site for the first time.

Everyone will hear complaints from their customers (I hope, or they wont have customers for very long), the question is if that is a problem that fixing will save you time or make you more money.

My read is not much of either.

If you want a fallback like this black box font for the clients who wont/cant be educated that is fine, but you might want to consider firing your client if they are causing enough exasperation that you create entirely new fonts.

I used an approach to boilerplate dummy text like this. Once. It's all it took, because I immediately got a report in our issue tracker that FireFox renders the text with boxes.

Now we routinely copy/paste similar content from similar pages and use that in live mockups.

>So they might still complain that the text of their site/product/etc. has been replaced with something unintelligible //

Perhaps the answer is to have lipsum that looks like: "Sample text, this is place-holder text. None of this is supposed to make sense. All these sentences are designed only to fill in for real text; once the real content is known it can replace this. Some other sample text is written using Lorem Ipsum - but it can be confused for a mistake. So, we use normal writing to demonstrate how content might look."

Et cetera.

I think you might have an issue with forgetting to replace text like that. It should be much easier to spot black bars / repetitive latin ('gibberish') than standard sentences.

Also, some people find text that they can understand distracting (because they're drawn to read it), which is one of the other motivations for using lorem ipsum. But apparently some people also find text that they can't understand distracting (because they're annoyed that it doesn't make sense or they don't know what it is), so it seems hard to win here!

Actually, I think it's wrong to just replace distracting text with bars, maybe there is something wrong with the text: too much, poor style etc - so leave the text where it has to be.

And for non-Latin lipsum, you can use this website: http://generator.lorem-ipsum.info/

Can't help but thinking of creating a "lorem ipsum detector" for relevant cms's.

Then if you would try to publish something that looked lorem ipsumish you'd get a warning, much the same way that you get if you try to send a mail w/o a subject field from (most?) modern mail clients.

Many fonts do not contain characters other than basic latin, so a fallback font will be used.

Google Translate guessed that to be Tajik.

It's actually Ossetian.

Adam Schwartz's Magic of CSS has a nice trick for getting the same effect without needing a custom font.

See it in action at http://adamschwartz.co/magic-of-css/potions/two-pane-app/

The relevant CSS is in http://adamschwartz.co/magic-of-css/css/potions.css:

  .mock-paragraph b {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
    background: rgba(0, 0, 0, 0.1);
    width: 3.125em;
    height: 0.5em;
    margin-right: 0.3125em;
    margin-bottom: 0.3125em; }
    .mock-paragraph b:nth-last-child(4n+1) {
      width: 4.5625em; }
    .mock-paragraph b:nth-last-child(10n+1) {
      width: 0.875em; }
    .mock-paragraph b:nth-last-child(9n+1) {
      width: 5em; }

Solid link. Thanks. Bookmarked.

Interestingly, the whole point of lorem ipsum is people don't understand it, so they can focus on design when reviewing, not what is written. A good alternative to 'text goes here...' stuff.

These kind of fonts look good on wireframes, not so much on prototypes in my experience.

Interestingly I just found redacted font from product hunt which seems to have similar vision. https://github.com/christiannaths/Redacted-Font

Either way, good job, will use either one in some projects! Thanks :)

Redacted Script? More like Doctor's Handwriting if you ask me :p

Read the disclaimer ;)

Fantastic. I've used BLOKK in wireframes and run into the same issues that the creator of Redacted did - the text doesn't have a predictable width. It can be a pain in the ass to use because of this.

Glad you posted this, I'll be giving it a go ASAP.

I use the introduction text from the Wikipedia article on lorem ipsum. Best of both worlds, and meta lols.

Wow, that's perfect!

This is of no use to me. I generally want to know the font styles I'm working with. Seeing black bars doesn't help with that.

This is a good illustration of exactly why this font is useful - you want to focus on typography, so you think you need to see text. Given a mockup that needs comments about the layout, or color, or whatever you'll be looking at the wrong bit. This font lets you can see where the text goes, but you can't spend time worrying about the font, weight, kerning, etc so you'll only be able to give feedback on the bits that need feedback.

Obviously if a design needs comments about the typography the designer wouldn't use this font.

This is not for you, it's for the client. And if the client really doesn't understand what lorem ipsum is for, they're probably not going to appreciate the typography either.

I really love this, and look forward to using it. I especially like it because there is now way you are going to confuse this for filled in content and launch a site with it in there.

On the subject of placeholder text: some like it, some hate it, most use it. If you are a designer, and use placeholder text, please, please, PLEASE, I beg of you, don't use the same bit of text for everything. Grab a bookmarklet, or widget or whatever to generate random lengths of text for everything. There are so many designs I've gotten over the years where it looks fantastic as long as every bit of text is exactly the same height, but as soon as placeholders are filled with real content, the design looks horrible.

Also, any designer that stopped delivering PSD's and started delivering markup, if we meet in person I'll buy you a beer.

"Why are there so many black lines? Do they have to be black or could we use a different color?"

Because we tried to use white lines and people complained that was racist and that we shouldn't give into White Privilege. #BlackLinesMatter

█████ ██ ███ ████████ ███████ ██ ██████ █ ██████▓▓▓▒▒░

Yea, Unicode got that covered:

http://en.wikipedia.org/wiki/Block_Elements

http://en.wikipedia.org/wiki/Box_Drawing

I consider copywriting part of the design process.

Language is aesthetic and functional and it's implication on the design is actually way bigger than most people would give it credit for.

So I normally find great enjoyment in trying to write what I consider the right copy. Sometimes I will inspire the copywriters, love when that happens.

Nice idea.

Does anyone know if this is completely free to use or available under some specific licence(s)?

I doubt the author could claim sufficient originality for it to be covered by copyright. Especially since Facebook pages look like that when loading.

"(The) standard of originality (in copyright law) is low, but it does exist" - U.S. Supreme Court, in Feist vs. Rural Telephone.

This slightly improved version[1] is licensed under the SIL Open Font License.

[1] https://github.com/christiannaths/Redacted-Font

I've always used Lorem Ipsum; never had a problem with designers or clients, but with other developers actually.

I understand that Lorem Ipsum has a letter distribution close to real text in English, and thus it is useful to judge how things will look. Other than that, couldn't you use more obviously-dummy text? Like "blah blahblah blah."?

Or just "This is an example text; we hope you like how it looks."?

I like the idea but I am not sure if it fixes a real problem. I don't think I have ever had feedback from clients complaining they don't understand the text.

Where did you get your validation from?

Edit: Looking at the amount of likes/tweets you seem to have social validation, just not sure where I would use it.

I mocked up a website for someone once and they asked me to translate some lorem ipsum into English (I think they thought it was French).

The more specific your mockup is, the narrower the feedback will be. For example, using colors or text in a mockup often limits the feedback to "I don't like this particular shade of blue" or "There should be our slogan here". Source: worked for a web agency.

I worked in the advertising world for a few years and I would say about 50% of clients were confused by "lorem ipsum" text. (The number of clients confused by a UX mockup and an actual design prototype was around 90%).

I guess I have just been lucky and/or my mock ups were so confusing that the text was the last of their concerns heh.

This seems similar, but possibly more useful as it won't distract the reader with large geometric blocks of uniform color.

http://notionparallax.co.uk/wordpress/?p=1491

I'm still waiting for someone to develop the "password" font () so I can tell clients to use that before they put passwords in Word docs before they email them over.

I'm hoping that you're kidding, but in case you're not, this is definitely not secure. It's only marginally more secure than just sending it in a regular font.

If anyone were trying to intercept that document in order to steal passwords, the font would have absolutely no bearing on their ability to find the password. In plaintext (ie: document opened in Sublime, or other plaintext editor) the password would be very obvious. And even if the interceptor didn't open it in plaintext, it would be incredibly easy for them to just... change the font.

Using a "password" font would only decrease the likelihood of someone reading the password over your shoulder. I guess that has value, but I think you'd be way better off finding a real encryption solution.

My coworkers and I use Keybase for sending secure info back and forth. The UI there is super simple for people that don't actually understand PGP, but it's (almost) just as secure. You could even do something simple like `keybase decrypt password.txt | pbcopy` on a mac, and that would take the encrypted text and put it in your clipboard - it would never show the password on your screen in plaintext.

Oh goodness, I'm kidding!!! I used to teach dev classes and I'd run that one by in class to see who 'got it'. Thankfully most did. Would also joke about using "soundex" matching on passwords to let people in with passwords that were 'close enough'. Most people caught on to that one too (but surprisingly not everyone did).

I guess this is handy for very early layout concepts. Any designer worth their salt that isn't in a vice via client et al would drop it after the concepting stage.

One reason to use placeholder text is to test how a font will look like in a design. You can't do that if you're using this font.

Plus it's too dark.

If you're designing a web page without the marketing copy it'll end up holding, you're basically doing it wrong.

This is nice. However, I would love to have more exemples... Set up a few example pages!

Awww...screw all that logical stuff.

It just looks cool.

Reply on news.ycombinator.com