Print-like effects and retro typography are very popular in web design right now, and one of nicest borrowings from print is the faux-letterpress effect. With broader support of CSS3, you can produce this effect using stylesheets alone in the web browser, acting on dynamically produced content. Unfortunately, there’s only one version of this effect you can implement that way.
There are basically two ways to produce this look:
(1) text that is darker than the background with an even darker inset shadow, producing a “punched-in” letterpress look due to the shadow on the letterforms, and…
(2) text that is darker than the background with a text shadow that is lighter than the background, producing the illusion of a rim of light around the darker “pressed-in” letterform.
Both are possible with Photoshop, and the second is possible using CSS alone. It wasn’t until I’d used this effect and studied it elsewhere that I even noticed the difference – so I thought I’d make a note of it here. I’ll demonstrate:
Here’s the first faux-letterpress effect:
Here’s the second:
The first effect, with an inset shadow, is done with a clipping mask in Photoshop (and a lot more can be done with this technique). There’s a good tutorial here on how to do it.
The second effect can also be produced in Photoshop (as the above image was) simply by duplicating the text layer, lightening the color, and placing it below and a pixel or two to the side.
But it can also be produced with CSS, and applied to dynamically produced content (for example in a WordPress theme), with the CSS3 text-shadow technique. It looks something like this:
/* background color has to be a bit darker than the text shadow */
#my-box {
background-color: #B1A897;
}
/* this is for the text color */
#my-box {
color: #505050;
}
/* and here comes the text shadow */
#my-box {
text-shadow: 1px 1px 1px #ffffff;
}
Here’s a good tutorial covering text-shadow, if you’re interested.
