Is there a hard and fast rule for choosing colours to make text appear inset

Question

I've always liked the look of inset text on web pages so I try to use it every now and again. (Sparingly and when appropriate).

I always find it a bit of a chore to find the right blend of colours between the background colour, the text colour and the text shadow colour.

I was wondering if anyone has come up with a hard and fast rule to make choosing the correct colours a little easier?

i.e. something along the lines of: the text colour should be 20% darker than the background colour and the text shadow should be 10% lighter than the background colour.

Answer 1

The rule is that there is no rule. You need to follow your eye and trust what you see. There are even some instances where you might use a purple shadow on yellow. I don't advise it, but it can be appropriate.

The other obvious problem with a rule is that it will break at the ends: how do you highlight pure white or cast a defined shadow on pure black?

Whatever you do should probably be consistent on the end product, but there is no need to be consistent from site to site (brand to brand etc)

Answer 2

I'm not entirely sure whether you mean "debossed" or "cut out". Either way, there are a few things to keep in mind:

• A shadow takes on the color of what it falls on, but is often shifted a bit toward blue. This is a built-in expectation from daylight: shadows are lit by blue sky.

• Translucent materials lend their color to the shadow, because they filter the light.

• If you are creating the illusion of colored light, the shadow does NOT take on the color of that light if the material is opaque.

• Darker shadow and harder edge for small "distances" between the face and the cut out text; less dense shadow and softer edge if the text is "deeper."

• Text color and shade depend entirely on the mood you're trying to create. Same as foreground (background?) gives a peaceful, quiet mood. Strong contrast delivers a more dynamic message. Which you need in a particular project depends on the context.

Just as a general point, any time you are trying to create an illusion like this, your first action should be to go look at (or make) at examples in the real world. Observation is the ultimate teacher.