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

You can use the css3 property text-shadow

Warning: Browser compatibility problems (IE9 no support)

http://caniuse.com/css-textshadow

a simple example:

.shadow {text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);}

http://jsfiddle.net/H4JtR/

If you use white shadow over black fonts, or vice-versa, your text will be readable no matter what is overlaying.

Another option is to use a background-color with transparency (you may want to apply this to an inline element like a span or a p instead of a div because background-color is going to apply to the whole div area even where there is no text)

background: rgba(33, 33, 33, .9);

http://jsfiddle.net/LSRkE/

Just use a transparency that contrasts with your font color. Then you can lower the alpha-channel value so the image from the background will be visible enough.

Related answer here https://stackoverflow.com/a/5135033/953684


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.


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

Tags:

Html

Css

Fonts

Recent Posts