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:
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.
Remove Text, Uncover design
This is what The Onion’s homepage looks like normally:
This is what the same page looks like with Redacted Script Bold:
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.