
This effect is known as “ halation” and it affects users with astigmatism, which people of all ages could have. When this occurs, the white letters can bleed into the black background and cause the text to blur. This makes eyes work harder and open wider since it needs to absorb more light. There’s also reasons why you shouldn’t use a pure black background with white text. A pure black background kills all light emitting from the screen. This prevents overstimulating the retina and allows users to read for a more extended period.Ī research study found that “black text on a white background overstimulates the OFF ganglion cells while white text on black background overstimulates the ON ganglion cells.” This finding means that “white text from a black screen could inhibit myopia, while black text on white background may stimulate myopia.” The study advises against reading black text on a white background due to the striking effects of contrast polarity. Instead of black text, use dark gray text on a white background, so the change in brightness isn’t as drastic. But if we turn on a dim light in a dark room, our eyes adapt to the change easier because our retina isn’t overstimulated by such a sharp increase in contrast. Such a drastic change in light conditions is harsh to our eyes. This causes the eyes to work harder to adapt to the brightness.Īn example that illustrates this concept is when we turn on a bright light in a dark room. Such a disparity in color brightness creates intense light levels that overstimulate the eyes when reading text. White has 100% color brightness, and black has 0% color brightness. Pure black text on white backgrounds can cause eye strain when users read the text over an extended period. Designers can do their part to reduce the likelihood of eye strain on their designs by paying attention to the color of black they use. Think “soft”, “faded” or “blurry” effects over your images.Did you know that pure black text can cause eye strain? A survey found that “58 percent of adults in the U.S.” have experienced eye strain from working on computers. If you can blur the shadow into the background, it will make your text pop just enough to really catch the eye (without being overbearing). Your drop shadow or glow effect should “lift” the design… it shouldn’t become the design.

Let’s say it together: Not all type needs a text effect.

If all we see is a drop shadow, then you need to rein it in a little.Īnd please, for the love of all things typography, only use text effects on type that you want to highlight. One of the biggest dangers with text effects is to over-do them.

Please include attribution to with this graphic. Here’s an example of cringe-worthy color contrast: Your text effect should also contrast with the background. So, over and above thinking about brand colors, you need to think about which ones are the most important.Ĭontrast can be achieved with light and dark, color, shape, texture, size… and of course text effects.Įnsure that your type color contrasts with the effect you use (shadow or glow). Text effects are no different and require you to decide who’s boss! It tells your design “who’s boss!”īy that, we mean it tells us where we want someone to focus when they look at an image. When it comes to design, contrast is pretty important. Do’s and Don’ts for Creating Drop Shadow Text Effects that Don’t Suck 1 Do – Use Contrasting Colors

Oh and there’s an Infographic and a super cool video if you prefer the visual way (scroll down). Let’s take a look at some Do’s and Don’ts for using text effects (in particular drop shadows and glow effects) in your designs.
#The shadow you shouldnt be here how to#
But unfortunately, many DIY designers missed the memo about how to use them correctly… to create text effects that don’t suck. There are so many DIY tools letting us drop shadows. This includes the clever use of light and dark, and text effects like drop shadows and glow.īut those same effects, rendered badly, can instantaneously make your design unpleasant to the eye, overbearing, or even worse… cheesy. When text effects are used well, they can draw people into your design, give it depth, and help to lift it. Let’s create text effects that don’t suck. Text effects like Drop Shadow can easily fall into the latter category when used badly. Are you sending your brand into the cringe-zone with bad drop shadows and text effects?ĭesign trends can be fickle – considered cool one year and cringe-worthy the next.
