How to make great word graphics for social media sharing

Images like the one above are a great way to share little pieces of your message. If you get them right.

You can spread them on social media. They’re like message sweeties that people can share with their own contacts. Images like these are also good for putting in web pages, to show up when people share that page. (And you can’t share a page on Pinterest if it has no images.)

The point of these ‘word graphics’ is to be visually attractive, with a message the reader can take in quickly. Then they can have a smile, or a pause and think, and then carry on with their day. You might even change someone’s life, if they’re in the right place for your message to go in deeply.

A lot of us have discovered tools that make it easy to create these graphics: choosing from a selection of backgrounds and text styles and outputting the final image, without having to use full-blown graphics software. I use an iOS app called Wordswag that someone introduced me to. There are lots of other apps too. Some people use Canva, an online design tool.

But just because it’s easy doesn’t mean the software will automatically make good graphics. That’s down to you.

Remember: attractive, and easy to absorb. If the reader’s brain decides that processing your text will be too much like hard work – or if it threatens to hurt their eyes! – they’ll move on to the next thing and never absorb your little nugget of wisdom.

So here are some tips.  

Contrast

The commonest problem I’ve seen with word graphics is the text not standing out enough from the background, which makes it harder to read.

You have to play around with the options till you find a combination that works. But knowing the principles will help you head in the right direction faster.

The basics

Let’s start by imagining a simple image, where the background is a plain colour or a simple pattern in one or two colours. Contrast comes from two things.

Light vs dark. Light text on a dark background, or vice versa, stands out well. White on yellow doesn’t, because they’re both light. Black text on a blue background doesn’t, because they’re both dark. Hopefully you can see that examples 3 and 4 work better.

Complementary colours. If you have a red background and use red text, you might get it to work if there’s a big light-dark difference between them. The other thing you could do is use a different colour that works harmoniously with the background. You might need to play with the precise shade and brightness to make that work. Think about basic colours – red, blue, green, yellow – and experiment with text colours that aren’t prominent in the background image. For instance, blue and yellow can work well together. I wouldn’t get too fancy with colour choices, like violet or luminous green. Always remember that black and white are options.

When you move to a detailed image, it becomes more complicated – especially with a full-colour photo. Then you have a wide range of brightness and colour within a single image, and it can be hard to find a text colour that works. You may find it stands out clearly at one corner, but at another corner it gets mixed up with the background that’s underneath it. Let’s look at some tips that can help with that.

Picking the image in the first place

Let’s cleverise ourselves by introducing a design concept called negative space. It’s an odd term, but simply means the areas on a background where you can position other elements without messing things up. On a plain colour that’s all of it. On my image at the top, the man looking up is the key part of the background picture, but the spire and roof can be covered without losing the sense of the image.

When choosing a background photo, look for large areas of negative space where the colour is mostly the same. Maybe the sea, or a grassy field, or an area of roof tiles. If that’s big enough to fit your text in, you only need to worry about contrast with that background.

It helps if there’s only light detail. Lines and textures adjacent to your letters can lead the eye away and break up the outlines. Grass from a distance would be better than those roof tiles.

For the pair of images I’ve used as an example above I deliberately chose a difficult background image. It’s busy, with lots of lines that can interfere with the outlines of letters, and it’s hard to find a contrasting text colour. There’s a little negative space in the corridor floor, but its shape makes it hard to exploit.

Picking the right text style

On a plain background with good contrast you can get most of the fancy text styles to look OK. But on a detailed background, when the letter strokes are only a couple of pixels wide it’s hard to distinguish them. Then you need strong, bold lettering.

I’d class my roof spire lettering as medium. By giving the eye an area of, in this case, white, it’s more definite which bits of the image are the letters. It would have been even clearer with one of the bolder styles, but I liked the layout on this. You can see the comparison on the corridor images.

Playing with the image settings

Wordswag has sliders that let you alter the lightness-darkness of the background image, and add blur to it.

The roof spire image was darkened a bit to help the white text to stand out. In other cases you might lighten it to fade the background, with darker text. If there’s a lot of detail or texture, a small amount of blur will smooth that out so it doesn’t distract as much from the lines of the letters.

There’s a small amount of blurring and darkening on the second of the corridor images. Blurring might have helped with the lines of tiles in the roof spire one, but I needed to keep the man in focus.

I should say – the roof spire image isn’t the best I’ve ever made. It hit the threshold of good enough in limited time. I searched for a ‘looking up’ image and liked this one best, but it is a troublesome one!

Text style

You may have lots of options for the style of the text. There are in Wordswag, and it’s fun to play with them. But they’re not all equally useful.

I’ve said above that if you’re using a detailed background image like a photo, you’ll probably find that only bolder lettering works – not, for instance, swirly handwriting.

Feel

Do the font, decorations and formatting match with the impressions you want to give out about yourself? Does it fit with the message in your text? For example, I have access to a style that adds little hearts around the letters. I haven’t yet found occasion to use it. 😉

Are you about bold ideas, or sensitive support, or arts and crafts? Different fonts and variants would suit those.

Layout

In Wordswag, each style is presented with five variants as to how it displays the text, and you can ‘reroll’ the settings to get a different set. These affect the size of different lines of text; alignment (left, centre, right) on different lines; where it puts line breaks; where it puts decorative elements. You have to fiddle with it till you get a combo that works, often passing through several that are frustratingly nearly right.

Centred text is more acceptable here than in most uses, but remember that readers scan down the left side looking for line starts. What you don’t want is one word nestling in the middle of a line with a big gap to either side.

Visual flow

Try to find a style that doesn’t break sentences/ideas in the middle. For instance, some Wordswag styles put horizontal lines across the width of the text. That can be great if your message structure is statement 1 – statement 2 – conclusion. But only if you get the separation in the right place(s)!

Also, if the text size varies between lines does it emphasise the most important words? Or does it hide them away between less important connecting words? This is one of the things I wrestle with in Wordswag. Setting the line breaks manually helps, but it still involves a lot of trying options till it falls into place. If I made the image myself in graphics software, I could just set the sizes.

Fundamentally, does the formatting of the text support the flow of what you want to say? Or does it make it look like graffiti by a crazy person?

Positioning of the text

In most cases you don’t want to jam it right up to the edge: leave a nice gap on all sides of the text block.

With a more detailed background image, keep an eye on what’s under the text. If there’s a background element that’s spoiling the contrast of the letter shapes, perhaps moving the text slightly will stop that happening.

Another Wordswag feature: it shows dotted lines to mark where Twitter will cut the top and bottom off the image when it shows them in the twitter.com feed. (Viewers have to click to see the whole image.) Sometimes you’ll want to position the text block within those guides, so everyone gets a glimpse of the words as they fly past. Sometimes you rely on the image’s visual intrigue; or the text is already in the body of your post and the image is an add-on.

Message length and wording

I’ve occasionally tried to get something across that requires quite a lot of words. I don’t think it works well. You can do it, and produce an attractive graphic that says something useful and important. The issue is whether people will read it.

When I’ve done that, I’ve looked at the end product and doubted whether I would stop to read it myself. Maybe if it came from someone I particularly liked and trusted. But I’m someone who’s especially likely to read chunks of text – a general audience will have a lower tolerance.

Ideally, go for one idea, or a connection between two simple ideas, that you can set out in a concise, snappy way. Practice on Twitter may pay off here!

I think it’s important to use short, everyday words too. The rhythm is better, and it seems more direct. That includes emotion-words that you might not use often in everyday conversation, but that people know and respond to.

If you use long words, or lots of adjectives, or overuse qualifiers like ‘actually’ and ‘particularly’, the energy tails off. Read it back to yourself and see how it feels. There’s the essence of what you’re saying, and the clarity, beauty, power or cleverness of the language you use to say it. If writing isn’t a top skill for you, go for simplicity, honesty and empathy.

File size

If you use a tool like Wordswag, the dimensions of the final image are pretty big. If you’re using a detailed photo as the background, that can be a big file. The one at the top of this blog came out as 10 megabytes.

(If you’re wondering why a detailed image makes a bigger file: when you save to GIF, JPG or PNG formats, they compress the image to keep the file size down. Big areas of a single colour can be covered by a few instructions in the file, but lots of little bits have to be described separately.)

If you use a big file as is, it’ll take a long time to display on the page. And if the reader is paying for their data throughput it’ll eat a chunk of that, which is a bit unfair.

So if you’re using detailed photos, I think you need to get some basic graphics software and at least learn to resize an image and save it as a JPG, controlling how much compression is applied to the file. Then you can make a version more suited to final use.

Image size is a bit of a minefield, because different social networks want different sized images to display in different places. In this era of portable devices with high-resolution screens, ‘preferred’ pixel counts have gone way up. But I find 600 pixels wide works well enough in most cases. I’ve saved some posts on social image size on my Pinterest boards, but it keeps changing.

Conclusion

Social image sharing is a useful tool for spreading your message and expanding your reach without spending a lot of time.  I hope this article will help you to use it more confidently and get better results. Please do leave comments or queries below.

If you’d like to explore further into visual design, take a look at my course Design your message into your website. It explores colour, fonts and layout, explaining clearly and giving exercises to help you put it to use to strengthen your message.