Some designers prefer content that is on a coloured background or reversed out of an image with the text in a lighter colour or white, however, many get it wrong.
Using a lighter text colour can make the page ‘more interesting’ or ‘punchy’ when done correctly but legibility needs to be at the forefront of any designer’s mind; if the communication can’t be easily read then you are in danger of losing your audience.
A few guidelines when reversing text out of colour:
Use high contrast colours – pink out of orange would not work but white out of navy works well.
Heavy font weight – when working on a design that has a white background with text you are free to use any font weight, however, when there are colour panels with text reversed out make sure the text within the coloured panels is a heavier font weight.
- Avoid small text if possible or at least keep to a minimum
- Avoid thin font weights
- Add more inter character spacing than you would normally do. The characters shouldn’t touch and there should be plenty of breathing space around letters
- If reversing text out of an image make sure you place your text carefully in a clear area.