17864 60
Content Marketing 8 min read

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
Words Vs. Background: 10 Ways To Make Pictures With Text Work 16261788120847
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.

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.

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.

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.

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.
Words Vs. Background: 10 Ways To Make Pictures With Text Work 16261788120848

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.

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.

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.

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.

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.

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:
Choose contrasting and blurred backgrounds to make text legible;
Use a partial color overlay as an alternative;
Incorporate text into the template. Use design elements to place an accent on separate words;
Create color combinations using Coolors, Paletton;
Use element repetition to create a harmonious design;
Choose fonts according to the topic and mood of the message;
Carefully adjust spacing between letters and words;
Stick with a hierarchy - the bigger the font, the more important the text is;
Add some contrast with different fonts and design elements;
Group the text in the center or follow the rule of thirds.

Speed up your search marketing growth with Serpstat!

Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.

A pack of tools for reducing your time on SEO tasks.

Get free 7-day trial

Rate the article on a five-point scale

The article has already been rated by 12 people on average 3.85 out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Are you sure?

Introducing Serpstat

Find out about the main features of the service in a convenient way for you!

Please send a request, and our specialist will offer you education options: a personal demonstration, a trial period, or materials for self-study and increasing expertise — everything for a comfortable start to work with Serpstat.




We are glad of your comment
I agree to Serpstat`s Privacy Policy.

Thank you, we have saved your new mailing settings.

Report a bug

Open support chat
mail pocket flipboard Messenger telegramm