I was just thinking about a way to hide all text from a website to put focus on the elements that are there when no content is present.

Does anyone know of a tool, CSS hack or bookmarklet that can achieve this? I have played around with some font replacement bookmarklet, but I'd rather have everything disappear completely.


  • 2
    there's wirify.com but it doesn't only hide texts. it shows the webpage as a wireframe.
    – Lovis
    Nov 7, 2013 at 12:12
  • 1
    Are you looking for greeked text (as your illustration) or a completely empty site with just static elements present? Nov 7, 2013 at 14:11
  • There is also BLOKK font and REDACTED font, though I don't know if there are web versions available (which could then be forced into the CSS via JS).
    – Erics
    Nov 7, 2013 at 14:42
  • Out of curiosity, what is the objective for doing this? Content is usually the key thing.
    – DA01
    Nov 7, 2013 at 21:47
  • Would * { font-size:0; } work ? As long as no elements relied on font size to swell them
    – Toni Leigh
    Nov 12, 2013 at 23:51

4 Answers 4


This is what I like to call reverse wireframes. It's very useful to see how your site has evolved over time OR to take a preexisting website and deconstruct it and pick it apart.

The tool I use is: Wirify and can be used on most any page buy just clicking the bookmarklet.

Just drag the below code to your bookmark bar and click it to turn the page into a wireframe.


Before and after using wirify


Here is a bookmarklet that will make all the text transparent:

javascript:(function(){var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]='* { color:transparent!important; }'})();

To get this to work, add a new bookmark and copy this code for the URL. It will change the text to transparent, preserving the width and height of the text elements.

Note: It will not always cover 100% of the text since the color attribute could be marked with !important inline with the elements or in classes, nor will it effect images that contain text.

  • Here's a quick way of creating a bookmarklet if you need to: benalman.com/code/test/jquery-run-code-bookmarklet
    – ChrisK
    Nov 7, 2013 at 13:51
  • 2
    This bookmarklet makes all the text transparent, which means it disappears. It doesn't do greeking. That said, it might be just what is required; the question isn't clear. Nov 7, 2013 at 14:10
  • 1
    @AndrewLeach - "I've played around with some text replacement bookmarklet, but I'd rather have everything disappear completely." That says to me that making the text transparent would be exactly what the OP wants.
    – Shauna
    Nov 7, 2013 at 14:39

If it's for internal viewing only, it's a very simple 1 line code change in CSS.

If it's going external on a hidden url, or to external clients, it's still a 1 line code change in CSS, but there are caveats. The main one being browser support. As long as you view it in Chrome or FF, or a recent IE version (9+), you'll be safe.

Firstly, download Blokk Font from http://blokkfont.com/

If it's internal If you know how to do it yourself, set the font-family to the newly downloaded blokk font. As you have it on your own machine, it will work no problem in any browser you look at it. Read more about font-family here : http://www.w3schools.com/cssref/pr_font_font-family.asp

However, rather than set it on single elements (p, ul, li etc) set it on body, and it will apply to all text, rather than just single items.

If it's external Use an attribute of CSS3 called @font-face. It basically 'sends' the font along with your page. There's an issue around using that with copyrights and distributing this freely. I'll let you look into all that, but will definitely do what you are looking for. Check out : http://www.font-face.com/ for more details. As I previously mentioned, this only works with recent browser versions.

The bonus with using a purely CSS solution is it will work with JS off if you are also designing a non-JS experience.

Bit of a geeky tech answer, but then I used to be a techy geek!

Hope this helps.

---- EDIT ----

Reading your question again, I'm not sure what I've suggested is what you are after. Your actual question asks for all the text to be removed completely, but your image looks like you are after the Blokk font method as I've outlined above.

If you want to completely get rid of your text so you can design, I would advise against it. Might be a controversial comment, but if you don't know what your content is, how long it is going to be, it might be quite dangerous/costly coming up with a design that won't fit the content. It's easy to line items up in Axure or photoshop or your tool of choice, but then when the real content comes is, it always poses more problems.

For me, both need to go hand in hand. Content and design.


Although you mention you'd "rather have the text disappear," your attached picture shows something quite different.

Assuming you want the blocks like the picture, you can use ExitText: a bookmarklet I created that turns text into scribbles.

For example, ExitText will convert regular text into something like this:

enter image description here

I wrote about the creation of the ExitText bookmarklet on my blog and found that dynamically converting text into square blocks looked much worse than expected, and the scribbles gave a much higher quality result.

ExitText on GitHub

Additionally, I found that this technique is good for uncovering text that has been embedded inside images -- a big no-no for accessibility and translations.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.