CODEWITHSUNDEEP
htmlcssfonts
Nikita240
Nikita240

Reputation: 1427

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

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?

Upvotes: 41

Views: 66724

Answers (4)

John
John

Reputation: 111

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);

Upvotes: 2

George Dimitriadis
George Dimitriadis

Reputation: 1815

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

Upvotes: 41

Sharky
Sharky

Reputation: 6294

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

Upvotes: 6

kamituel
kamituel

Reputation: 35960

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.

Upvotes: 41

Related Questions