Content Marketing 8 min read December 18, 2017
Content Marketing — 8 MIN READ — DEC 15, 2017

Words Vs. Background:
10 Ways To Make Pictures With Text Work

Words Vs. Background: 10 Ways To Make Pictures With Text Work
Picture by: Maria Marikutsa

Eugine Dychko
Product marketing manager at Crello
with 6 years experience in digital marketing, copywriting and PR.
Every day we scroll through thousands of posts, pictures and videos. Our brains have less than a second to decide what's interesting, and appealing to ultimately stop searching. There are just too many options and distractions.
This issue becomes critical when it comes to pictures with text. If words are hard to read and understand, your post will simply get ignored. Images with text should present information in a clear and simple way to grab a user's attention.

How to make graphics with text legible and eye-catching? Follow these 10 tips and learn from examples made with Crello.
#1

Picking the right background

It is hard to read skinny text on a multicolored background because it gets lots in front of all the colors. A font that is slightly darker or lighter than the color of the background will also be hard to read.

Work towards creating contrast with the background:

  • Make a colorful picture lighter or darker
  • Apply color or gradient filters
  • Blur the background to make it less intense.
A reader shouldn't have to look carefully and guess the meaning behind the text. Your job is to make the message clear at first sight. Sacrifice the beauty of an image to make the text legible and clear. The fewer details there are in your background picture, the simpler it is to engage users with text alone.
#2

Add a partial color layover

If you don't feel like adjusting the background picture is the right move, use a contrasting color layover under the text. A color layover can be in the form of a geometric figure, a spot, or a separate piece of layover under each line of text.

Even the slightest color contrast can help separate the text from the picture and make it more legible.
#3

Integrate text into your design

Words that become a part of the graphic work better than a plain text. To successfully integrate text into a design, you need to experiment a little.

You can start by using templates in online graphic editors. Try to split the text into several parts and place them on the picture with contrast. You can also use words and letters as stand-alone graphic elements.
#4

Respect color combinations

Faded grey text is hard to read while green text on a red background will look like it is going to jump out and murder you. Black on white is a classy choice but an obvious one.

To make a design more pleasing to the eye, choose dark grey for the text and alabaster white for the background. Stick to your gut instinct – if the color combination doesn't seem harmonious, ditch it. Use services like Coolors, Paletton and Adobe Color CC to find the best color combination or create a new one yourself. Don't use more than 3-4 hues in one picture.
#5

Repeating elements

Repetition of different design elements like hues, fonts, and icons, help create a more clear and holistic graphics. Using repetition, you can create rhythm in design, just like in a poem.

To make a clear connection between the text and the picture, use one of the colors from the background image for the font.
#6

Select fonts carefully

Just like colors, fonts create an atmosphere. Fonts can be fun or reserved, simple or sassy, business-like or intimate. Pick a font that reflects the tone of your message - thin letters for business, large geometric ones for a more upbeat message, or ornate for emotional phrases. The size of the font also defines the mood of the design.
#7

Pay attention to spacing

Usually, fonts come with default spacing, but sometimes they need some adjusting. For example, when the text doesn't fit with the image or the spaces between letters are too large.

When letters are too close together or too far apart, it makes the text less legible. Adjust the spacing between letters so that the phrases look neat within your composition. If the font is quite large itself, you may need to adjust the spacing manually.
#8

Keep hierarchy in mind

The main headline, an informative subtitle and a detailed basic text – this hierarchy works for both longreads, and text on images. Text (when divided this way) is easy to scan through and read. Your reader will be grateful if you use the classic text hierarchy instead of plain text that is hard to navigate.
#9

Contrast, not conflict

A color or a partial layover is not the only way to highlight text. You can use several fonts in one design, creating contrast and a good juxtaposition. For example, you can combine fonts with and without serifs. When experimenting with fonts, try to stay in line with balance and compatibility.

Besides the size of the font, you can use additional elements and fonts to emphasize certain words. If a majority of the text is in a heavy bold font, a couple of thin letters will direct a reader's attention. Remember that all contrasting elements should have something in common to avoid a conflicting message.
#10

Group words

Don't place lots of small sized text on a background image. Group text into one section and place it according to the rules of the thirds. An exception can be made for quotes and text ads when text takes up 90% of the space.

Even if there are several text extracts and each one has its own overlay, they should play along with the general style and compliment the overall composition. You can align text lines by center or the right/left side to make it neater.
A good design will enhance the simple text, while a bad one will silence a clever thought. To present any text on a background image in the best possible way, follow these tips:
1
Choose contrasting and blurred backgrounds to make text legible;
2
Use a partial color overlay as an alternative;
3
Incorporate text into the template. Use design elements to place an accent on separate words;
4
Create color combinations using Coolors, Paletton;
5
Use element repetition to create a harmonious design;
6
Choose fonts according to the topic and mood of the message;
7
Carefully adjust spacing between letters and words;
8
Stick with a hierarchy - the bigger the font, the more important the text is;
9
Add some contrast with different fonts and design elements;
10
Group the text in the center or follow the rule of thirds.

Recommended articles

Subscribe to our newsletter
Keep up to date with our latest news, events and blog posts!

Comments

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
By clicking 'Sign Up Free' I agree to Serptat's
Terms of Service and Privacy Policy
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward. These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom adivce from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name
Email
Phone
Skype or Google Hangouts
Comment

Upgrade your plan

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
E-mail
Role
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits

Christmas is a time for miracles.

You are almost on the finish line of our Christmas quest. The last brick of your lego-promocode is left on the way up 55% discount.

Did not find previous lego-bricks? Fill the form anyway.

Name
Email
Phone
Skype or Google Hangouts
Write your discount code