Obstructed Text: The New Trend

Have you noticed that some designers are doing more with the actual words on the page and less with fancy graphical elements? Obstructed text is one result of this type of minimalist, but creative, trend that combines the best of both worlds.

Obstructed text is exactly what it sounds like — text that is partially obscured by other elements but with still enough for the viewer to know exactly what the word says. It goes against conventional design wisdom that text needs to be readable and easy to spot. However, one of the reasons it works so well is exactly because it goes against standard design style and thus is unique and stands out.

Pulling off obstructed text design isn’t as easy as it sounds. Not only does the text need to remain readable, but you also have to limit the other elements on the page so that the technique isn’t overwhelming. It’s a true exercise in balance and precision and will likely stretch you as a designer. The best way to learn how to do obstructed text well is to look at some examples, see the elements those designers implement well and try your hand at this design technique. Here’s what to look for when scrolling through obstructed text inspiration.

1. Animated Elements Over Text

One way to apply obstruction is through animated or video elements, which will naturally draw the eye of the site visitor to that part of the page. Studies show that marketers using video increase their revenue 49% more quickly than those who don’t. Adding animation or video can engage your users and bring more attention to the text you want the user to look at. Implementing any type of video is a smart idea in a world where video is so much a part of our everyday lives.

Root Studio uses this technique very effectively on its landing page, showing just what you can do with obstructed text in a unique and compelling way. Root Studio is a graphic and web design company, so it probably isn’t surprising that they’d try out such an advanced technique.

They’ve done work for a zoo, so their landing page with a bright yellow background, the word “Root” in white text and an animated giraffe partly obscuring the letter “O” works well to show off the type of work they are capable of. Note that the rest of the page is kept very simple. The main focus is on the giraffe and the word behind his head.

2. Look From All Angles

Using obscured text can create some real situations where the word makes a symbol or another word that you don’t want to put out there with your name behind it as the designer. Be sure to not only look at your obscured text design from all angles but get additional eyes on it. If you know someone whose mind always goes to the gutter, that is the first person you should have check your design for anything embarrassing. While obscured text can create a brilliant, innovative design, the last thing you want is to create something embarrassing.

Keep the text you’re going to obscure simple and blocky to avoid this type of error. Since you are already doing something quite innovative in your design, you don’t need a fancy script type text in most cases. You’ll see that the words are straightforward. Salty Fred does an excellent job of achieving this, with a simple blue script behind a partially unwrapped candy bar. Note how the placement of the candy bar keeps the text readable.

3. Use Common Words

Another important element in obstructed text design ensuring you use words that are common enough for the user to make them out easily, even when obscured). So, words like “root” and “salty” work particularly well in the previous two examples. Keep it as simple as possible with this technique. The user should automatically understand what the word is without having to try to decipher it.

You can see an example of this with Inculerate’s landing page, where words such as “creation” and “idea” sit on top an image. The way everything works together is what creates the obscured text in this design with the colors of the font and the image slightly obscuring the word “idea.” This places the focus on the hands in the image and on creativity.

4. Place the Image Behind the Text

Another option is to place the image behind the text so that it serves as a background that doesn’t exactly obscure but might sort of blend with the lettering. This works best with an image that has limited colors, such as a black background and an image in gold. The lettering should then be ever so slightly lighter or darker than the colored part of the picture, with a portion of the letters laying over the color. This creates a very subtle, elegant effect.

You can see how the elements work together, more to obscure the background image, in Rooftop Test Kitchen’s Anew landing page. Note the large image that takes over the background, but then you have the lettering on top. It isn’t bold text that stands out, but it is jolting because it is in an unexpected place you wouldn’t normally expect text to be. This grabs the reader’s attention.

Coming up with creative ways to use text is something designers are always doing. Obscured text has been used recently a bit more, but it’s still a relatively new design trend that requires some pretty advanced design skills to pull it off effectively. If you want to create something unique for your clients, then this is definitely a trend to look at, particularly if words in their tagline or company name are common enough to work well in this type of design.