CSS - How can I make a font readable over any color?

Solution 1:

While text-shadow is nice, it doesn't actually give the result you want. A shadow is a shadow and what you need to have for most readable text is a "text border". Unfortunately. there is no such thing as text-border in css, but we can make one !

I am surprised by how much unpopular multiple shadows are. This is a case where by multiple shadows you can do miracles :

CSS

p {
    color: white;
    font-size: 20px;
    text-shadow:
        0.07em 0 black,
        0 0.07em black,
        -0.07em 0 black,
        0 -0.07em black;
}

This style will simply add a thin shadow (as thin as 7% of your actual font-size) around your text (up, down, left, right).

But are four shadows enough ? Maybe you can get a better result with eight ? It looks like the answer is yes, makes sense to me, but it could also be that we are overkilling things here. Note that in this case I also decreased each shadow's size :

CSS

p.with-eight {
    text-shadow:
        0.05em 0 black,
        0 0.05em black,
        -0.05em 0 black,
        0 -0.05em black,
        -0.05em -0.05em black,
        -0.05em 0.05em black,
        0.05em -0.05em black,
        0.05em 0.05em black;
}

Then in this markup in a colourful background you have a nicely readable text:

HTML

<html>
<body>
    <p>This text is readable on any background.</p>
    <p class="with-eight">This text is using eight text-shadows.</p>
</body>
</html>

JSFiddle example here

Solution 2:

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.

CSS - How can I make a font readable over any color?

Solution 1:

Solution 2:

Related

Recent Posts