Text and Images 101 – Discussion Recap

by on September 29, 2016 · 0 comments


Combining images and typography is one of the most commonly used design concepts. With so many design tools available, adding text to images has become easier than ever.

You have all seen countless examples: silly memes on your Facebook timeline, quotes of inspiration on Pintrest. From website hero sliders and banner ads to email marketing campaigns and any call to action – combining text and images is one of our most powerful design techniques.

However, just tossing text onto an image is not enough to make the design effective, beautiful and professional.

What We Covered In Text and Images:

In our class Text and Images 101 we discussed some important considerations when creating a design that combines text and images, as well as some tips for using text and images in your next project.

Members of the Expand2Web Experts Group who are interested in watching the entire discussion can view the recorded session here: http://members.expand2web.com/combining-type-and-images-discussion/

We specifically covered the following topics:

  • Critical consideration of composition
  • Establishing a focal point
  • Achieving balance
  • Choosing images wisely
  • Create a cool background for your type
  • Enhance visibility with color and contrast

Critical Consideration of Composition:

Where you choose to place your text on the image can have a big impact on the overall design. If the text is not large enough, the image is too distracting, or any other design choices are affecting readability, your finished product won’t have the impact you are looking for, or be as aesthetically pleasing.

How the text and images work together is extremely important. Having a beautiful image and striking typography doesn’t mean your design will be effective.

The key is finding the image and typography that work together to express your message.

Choosing Images Wisely:

Selecting the right image for your design is vitally important, and starting with a low quality image will generally result in a low quality design.

The image you choose should not just be a beautiful background for your text. The subject matter of the image should evoke emotion, convey tone and add context to your message.

If the text and image are at odds, the design will fail.

Create a Cool Background For Your Text:

Once your image is selected, you will need to decied what area of the image will be used to display your text. This area must be easy to find and easy to read. However, not all images will provide this area for text.

Images With Empty Space: Images with large empty areas lend themselves well to adding text. You can also improve the readability of your text by blurring or softening the portion of the image where you want to add your text.

What to Do When Your Image Has No Empty Space: Not all images will have empty space to add your text, this doesn’t mean you can’t use the image. In these cases, extra design work is required to make the type readable.

Here are some common ways of working around this:

  • Create a background shape for your text
  • Add an image overlay
  • Darken or lighten image

Enhance Visibility With Color and Contrast:

With an image selected, and the textual content written, you will want to spend some time considering how to make your text really jump off the page.

There are two ways to make this happen in your designs: color and contrast.

Enhancing Readability With Color: When choosing what color your text will be, there are two techniques that will help you achieve a professional design.

  • Pull color from the image: Using a color from the image will unite the image and text and lead to a very cohesive design.
  • Opposites attract: If you are looking to grab attention or make a big impact, you may want to choose a text color that heavily contrasts with the image or the background shape colors.
E2W Pro-Tip: You can use Paletton or another color tool to help you choose an opposite color for your text to create added contrast.

Enhancing Readability With Contrast: The contrast of your text and image does not only pertain to color.

Contrasting font size, typefaces, position and the slant of different words can lead to very impactful designs.


Inspiration Articles:
The Complete Guide for How to Marry Text and Images In Your Designs
Tips to Help You Properly Mix Text With Imagery
10 Tips for Designing with Type on a Photo


Creating beautiful professional designs that combine text and images has never been easier. However, keeping these important considerations in mind will help you to elevate your design skills to the next level. By paying special attention to composition, image choice, text readability and contrast, you have all the tools necessary to create something truly special.

The path to internet freelancing success can be difficult to navigate. Enjoy the journey by joining the Expand2Web Experts group and gain instant access to our library of previous classes by clicking here: https://www.expand2web.com/coaching-and-training/

Already an Expand2Web Member? What topics would you like us to explore next?

Article by »

Don is an entrepreneur based in Silicon Valley. He founded Expand2Web and is the publisher of the Expand2Web Blog, and the GetFiveStars Customer Feedback and Reviews service.

Don has written 313 articles on Expand2Web

Author Connect » Twitter | | Facebook |

See my disclosure about advertising and affiliate links

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: