SPEAK VISUALLY Receive practical tips on how to
communicate visually, right in your inbox.
When you start designing something new, it’s always hard to find the correct combination of background and text colors that complement each other to achieve a clean design that is legible and easy to understand.
In this article we’re going to discuss a few easy to follow rules that will help you to design more professional text based graphics
One of the most important rules to follow when combining text with backgrounds is to have good contrast. This is one of the most common mistakes made by novice and intermediate designers. They often forget the importance of contrast between layers (ex. text over background) and in turn their text becomes hard to read.
In fact you can have a fantastic background (be it a color or an image) but if you don't select the proper text color that is not overpowered by the background, your graphic will not be legible and clean. Below are three examples of the same color but at different shade levels over the background. As you go darker with your text you achieve improved contrast.
Notice how the text color is the same color as the background (but a darker tone). This helps to achieve a monogomous color relationship.
Using textured background (including images) can help to support your content; but it can also negatively impact it.
One of challenges in this case is that most textures are not uniform, which means that the text color you use may not work across the entire area. It’s better to match colors, or to find one overall color to use, but we need to make sure it works on the entire design area.
Another good trick is to add a solid shape behind your text with a slight transparency front of our textured background to make the text stand out such as the example below. This is a simple and easy way to let your text become more legible.
Tip: Use either a white or black color shape behind your text. If your text is dark, use white and if your text is light use black. Play with transparency of your shape to achieve the best contrast.
Not every font goes well with every background. If you're using a soft, pastel background, then a strong squared font is not necessarily the best choice.
You want to make sure your font style matches the tone of your background.
For example the quote below will look better on a softer sans serif script style font, like this:
And this background in particular could really use a stronger typography.
See how the message and background go together below?
We have already talked about contrast, but there are some specific rules with color backgrounds that are also pretty helpful.
You can check all the color matching theory in this article, where using the color wheel you can apply triad, compound and the analogous color schemes.
This is a design based in the triadic color scheme:
This is for a compound color scheme:
And this with the analogous color scheme technique:
What do you think? Is there anything else you use as a rule to create your designs? We want to hear your tips!