Make sure you choose a dark photo with light text or a light photo with dark text.įrom one web designer to another, I hope these techniques help inspire your next web design project. But you will still need to be aware of text -to-background font contrast. Large Text – Large text might just be the easiest way to improve readability. This technique is great for projects where you want to showcase your clients work without adding any type of photo filter.Ĩ. Text Drop Shadow – Adding a drop shadow to your text will help increase readability in photos with more complexity. Placing text on less complex areas of a photo will typically improve the readability.ħ. Placement – Placement of text is always important, and sometimes choosing the right photo makes it very easy to determine the correct location for the content. Only the area directly behind the text is filled with a solid or transparent color, allowing the users to clearly read the content without loosing much or any of the photo.Ħ. But text with background colors allow you to see even more of the image. Text With Background Color – Text with background colors are very similar to the background shape technique. This technique is best for projects where you need to showcase the clients work and really make an impact with a specific image.ĥ. Shape Overlay: Using a solid or transparent shape is a great way to improve readability of text on top of a photo without loosing important elements of the photo itself. This technique is best used on projects where you want to create a background texture, rather than showcase the client’s work.Ĥ. The trick is to find the right photo and the right level of blur so that your eye does not become confused or strained. But image blurs are not perfect for every situation. Image Blur – Image blurs are one of the easiest techniques for making text readable. Depending on the level of transparency, this type of filter will make the photo less prominent, allowing the text to be clearly legible.ģ. Not only does the gradient overlay give the photo a refreshing look, but it can also set the mood based on the chosen colors. Gradient Overlay – Gradient overlays are very similar to color overlays, but this technique uses gradients typically from one side of the color spectrum to another. This technique allows for the photo to become less prominent and forces the text to pop out at the reader.Ģ. In the past, adding a black or white filter was the most common practice, but recently we have seen a rise in vibrate color overlays. Color Overlay – Color overlay, also known as color cast, is a technique in which you place a touch of color over an image. If you’re looking for some inspiration, I’ve put together a nice list of tips and tricks to help you properly mix text with imagery and to help ensure success with your next web design project.ġ.

If you can’t say yes to all these questions, then it’s time to consider a different photo or a different text overlay. Can I ultimately read the message I am trying to convey? (Overall Readability).Is the font light enough to be placed on a dark photo, or dark enough for a light photo? (Text to Background Contrast).Is the font large enough to stand out? (Font Size).

Is there too much going on? (Complexity of Photo).

When I’m designing for my clients, there are 4 questions that I always consider before I move on.

You cannot simply place text over any photo and expect it to work. There are a lot of elements that you need to consider when choosing the right photograph for your message. However, it’s not as simple as it sounds.

That is why the pattern of placing text on top of large photographs has been a prominent technique in web design for the last few years. It’s not a secret that photographs provide a nice visual experience for people, and text helps convey the message you are trying to communicate.

Latex overlay text on image