Overlay

Overlays are a semi-transparent layer between an image and text to make copy easier to read.

Choosing a style to match the image

Picking the right overlay is a subtle art. Choose an overlay that doesn’t drastically alter the appearance of the image. The goal is to add just enough so the images looks untreated – whilst boosting text clarity. The overall colour, exposure, crop and style of image will influence which one you choose.

Match the image

Text placement

The placement of text will also have an effect. You may need to pick different overlays at different breakpoints where text moves.

Text placement
  • Use BPK Overlays when you need to treat an image where text appears above it.
Overlay Do
  • Don’t create your own Overlays, these won’t be available in Code.
  • Don’t apply to areas of the image with no text.
Overlay Donts

Poor image choice

Some images are simply beyond fixing with Overlays. Even doing destructive image editing might not be enough. If you’re trying too hard to save an image and text composition – consider choose a different image.

Poor image choice