ExitText: Remove Text To Design Without Reading

I stumbled across a post on the UX StackExchange site posing an interesting question:

How does an existing website look without text?

Many of the answers (at the time of writing this post) didn’t address the core of the experiment. That is, what tool can be used to remove text on a webpage to better be able to assess its placement, density and design?

This picture was attached to illustrate the effect:

A website with 'blurred' text
A website with ‘blurred’ text

This was very interesting and seemed like a fun challenge, so I took it upon myself to find the solution.

Web Copy Placeholders Without Lorum Ipsum

Searching the intertubes led to a square-block typeface called BLOKK. Described as “a font for quick mock-ups and wireframing for clients who do not understand latin“, it seemed like a good choice. Unfortunately, it wasn’t open source, so the search continued.

I found an alternative in Christian Naths‘ open source font family called Redacted. Released under the SIL Open Font License, I was free to use it as I wished.

Remove Text, Uncover design

This is what The Onion’s homepage looks like normally:

The Onion Homepage screenshot - without modification
The Onion Homepage screenshot – without modification

This is what the same page looks like with Redacted Script Bold:

The Onion homepage with Redacted Regular font
The Onion homepage with Redacted Regular font

With a solution found, all that was left to do was to make a bookmarklet so web designers can remove text anywhere and replace it with scribbles.

ExitText: Remove Text On Any Page

After learning about embedding base64-encoded font files into CSS stylesheets, I put together a small script that injects a stylesheet into the head of a page that overrides all font declarations with Redacted Script Bold.

When activated, ExitText will remove text on the current page and replace it with scribbles. It’s open source and available for installation on GitHub.

Installing ExitText Bookmarklet

Click here to go to the GitHub project page for ExitText and follow the instructions.

To activate the bookmarklet, just click on its link in your browser’s bookmarks bar. Browser support is increasing with each commit, so check the GitHub page for more information.

A Quick Note On Embedding Text In Images

ExitText provides a quick way to see what “text” is actually embedded images. In The Onion’s screenshots above, the tagline under the logo at the top and the “A.V. Club” label in the top-right of the page stick out by being the only remaining readable text, which shows where an improvement to the site’s content can be made.

Now that webfonts (and SVGs) are widely supported, please be smart with embedding textual content into images.