Simulating The Letterpress: From Fireworks To CSS Code

One of the visual effects that is a mainstay in Jose Olarte's Web design toolkit is the letterpress effect. Used properly, it’s a quick way to make text blend better with the layout, as if it were machine-stamped onto the background. Think of what a home appliance marquee or a professional business card looks (and feels) like, and you’ll know what he is talking about. He has developed a simple workflow for creating a letterpress text effect in Adobe Fireworks that, with the advent of CSS3, can be applied directly to HTML text — no images needed. Here’s the best part: it doesn’t use any Bevel or Emboss Live Filters.

Letterpress is a venerable technique of printing that involves “pressing” a plate of movable type onto a sheet of paper to produce an effect that is impressed (where the text is pressed down onto the paper) or embossed (where the text is raised above the surface of the paper). Fireworks’ Bevel and Emboss Live Filters are a bit primitive for Jose Olarte taste. The refinement controls are unwieldy — for example, you can’t set highlights and shadows independently — and the result is subpar. It works OK for straight edges and sharp corners, but it gets rough around curves. A better way to recreate the effect would be to use the Drop Shadow Live Filter, because it produces smoother edges.