: What is the best way to write text over a photo so that it can easily be read? This is a view from an app for restaurant. As you can see, buttons and title of the dish cannot be read

@Jessie844

While the title is easy to read in your second example I would consider moving it below the image and rearranging the other elements (price, description, etc). The image is very important so you should try not to obscure it if possible.

Another alternative would be to hide it then slide it up on rollover to how you have shown. You could also have the buttons almost transparent and fade them in. This keepsthe image as the hero.

Vote Up Vote Down

@Caterina889

For optimum viewing, and given that you can't control what's below them, those buttons should really have a set, high contrast, background color/gradient. This would ensure that the text is always readable.

You can also do away with the drop shadow on the type to provide a more upper-scale, fluid, appearance.



Another alternative, if you want the photo to be perceived behind the buttons is to lower the opacity while using a high contrast color. Similar to how you've handled things lower in your image. While not quite as readable as a solid color, this at least allows you to add some darkness behind the text to ensure it's readable over lighter areas.

Vote Up Vote Down