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

http://blokkfont.com/

by Garbage • 12 years ago

214 65 12 years ago

blokkfont.com

Silhouette• 12 years ago

Nice idea.

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

Animats• 12 years ago

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.

unholiness• 12 years ago

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

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

juhq• 12 years ago

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 :)

kamaln7• 12 years ago

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

willvarfar• 12 years ago

Read the disclaimer ;)

rrrx32• 12 years ago

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.

hakanderyal• 12 years ago

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.

qznc• 12 years ago

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

schoen3• 12 years ago

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...

DanBC• 12 years ago

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

pbhjpbhj• 12 years ago

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.

cabirum• 12 years ago

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

michaelmcmillan• 12 years ago

Google Translate guessed that to be Tajik.

salazar5• 12 years ago

It's actually Ossetian.

Havvy• 12 years ago

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.

onion2k• 12 years ago

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.

Sharlin• 12 years ago

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.

iqonik2• 12 years ago

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.

mathieuh• 12 years ago

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).

oe• 12 years ago

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.

hvs• 12 years ago

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%).

iqonik2• 12 years ago

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.

Intermernet• 12 years ago

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

jamesdelaneyie• 12 years ago

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.

asb• 12 years ago

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; }

rrrx32• 12 years ago

Solid link. Thanks. Bookmarked.

daemonl• 12 years ago

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

alxndr• 12 years ago

Wow, that's perfect!

mgkimsal2• 12 years ago

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.

josephwegner• 12 years ago

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.

mgkimsal2• 12 years ago

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).

ikurei• 12 years ago

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."?

myfonj• 12 years ago

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

ahoge• 12 years ago

Yea, Unicode got that covered:

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

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

gitaarik• 12 years ago

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!

post_break2• 12 years ago

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.

vinspee2• 12 years ago

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.

zachrose• 12 years ago

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."

vkjv• 12 years ago

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.

hesselink• 12 years ago

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.

normloman2• 12 years ago

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.

jdawg77• 12 years ago

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.

RobertKerans• 12 years ago

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)

rbobby• 12 years ago

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

wernercd• 12 years ago

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

ThomPete• 12 years ago

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.

Raphmedia• 12 years ago

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

cubano• 12 years ago

Awww...screw all that logical stuff.

It just looks cool.

IgorPartola2• 12 years ago

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.

ddebernardy• 12 years ago

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

normloman2• 12 years ago

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.

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

Related Stories