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

Question

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?

Your code? What have you tried? – Vedant Terkar May 31 '14 at 10:33 — Vedant Terkar, May 31 '14 at 10:33
I haven't tried anything. I don't know a good solution. – Nikita240 May 31 '14 at 10:34 — Nikita240, May 31 '14 at 10:34
fixed the jsFiddle. Had to attach code. – Nikita240 May 31 '14 at 10:34 — Nikita240, May 31 '14 at 10:34

George Dimitriadis · Answer 1 · 2018-09-28T10:46:42.267

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

score 36 · Accepted Answer · edited May 23 '17 at 12:18

36

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.

edited May 23 '17 at 12:18

Community

1
1

answered May 31 '14 at 10:35

kamituel

34,606
6
81
98

2

Good answer! White text with a black border tends to work pretty well. http://jsfiddle.net/4AUDr/49/ – I_Khanage Mar 09 '16 at 14:07

score 6 · Answer 3 · edited May 23 '17 at 12:26

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

While it is a very good solution, I am almost certain that my employer will not allow it because it will conflict with the style of the website. — Nikita240, May 31 '14 at 10:40

score 2 · Answer 4 · answered Jan 20 '22 at 15:49

2

Perhaps this CSS was not around at the time this question was answered, but you can use stroke to add a nice border around text. Like this:

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(0, 0, 0, 1);

answered Jan 20 '22 at 15:49

John

101
1
4

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

4 Answers4