Asked

what are some good rules for adding text over a background image /hero image

Make sure the contrast is acceptable ( test foreground and background color values here: http://contrastchecker.com ). If you have control over both the text and hero image it's a matter of composition.

  • If you don't know what hero image or text is going to be shown ( for instance when they're user defined ), you can improve contrast by adding a dark or bright overlay.

  • You can add the overlay on top of the entire image, or add a background color to the text element.

  • For FilePond I've opted for a gradient overlay, to make this look better than the default gradient overlay it's best to use an easing method. I'm using <canvas> so have to do the blending with JavaScript.
    https://twitter.com/rikschennink/status/959069729959772166

  • If you're using CSS you can use finely tuned linear gradients ( do note that these might impact performance ).
    https://larsenwork.com/easing-gradients/

For more info, read this article on CSS-tricks: https://css-tricks.com/design-considerations-text-images/

I think you should look into Tachyons and have fun. There are very elegant solutions to your problem in the gallery: https://tachyons.io/gallery/

Sign in to answer 😃