CSS - How can I make a font readable over any color?
css, fonts, html
Solution
You can experiment with `text-shadow` property (MDN doc), for instance:
text-shadow: white 0px 0px 10px;
(jsFiddle)
It's supported in IE10. For IE9, you can use proprietary Internet Explorer filters as per this answer.
Problem
Assuming I have a set font color that I must maintain, and that it overlays content that can be of any color, how can I make sure the font is readable no matter what it's overlaying? Here is a jsFiddle to demonstrate the effect I am trying to describe. http://jsfiddle.net/4AUDr/ ``` #overlay { position: relative; top: -150px; color: #860101; } ``` Meme captions utilize white text with a black outline to make it readable over any hypothetical meme image, however I don't think there is a cross-browser compatible CSS only method of achieving that, and it would potentially look quite horrible with smaller fonts. What solutions are there to this problem?