Create letterpressed type using only CSS

Posted on by Elio Rivero

letterpress

Letterpress effect is one of the 2009 trends and is present in a lot of websites. It simply works because it adds a touch of “tactile” to the overall design and at the same time looks good with gradients, shadows, etc. Let’s see a quick way to add this effect to our sites using only CSS. You want to see the letterpress example before we start?

We could also create this letterpressed effect with images, but Using CSS offers us a very extensible framework. Suppose we have our site running on WordPress for example, and our pages use the letterpress effect through an image. If you want to add another page, you would have to go back to your graphics software, create a new text, export the image, upload it to the server and position it on the XHTML with CSS. If you have the letterpress effect set up by simple text, adding a new page with the proper heading is as simple as creating the page.

The markup

The idea is very simple: one layer will hold the receding characters, and the other layer will hold the highlight of the surface where the characters are pressed in. Let’s wrap this in a block to make it portable:

[html]
<div class="block">
<span class="highlight">LETTERPRESS</span>
<span class="color">LETTERPRESS</span></div>
[/html]

CSS Positioning

Our block must have relative positioning in order to enable absolute positioning for the color layer, which is the one that will be on top. We won’t be enabling absolute positioning for the highlight, because that would collapse our block.

[css]

.block {
margin: 15px auto 0;
position: relative;
padding: 20px;
width: 400px;
clear:both;
overflow:hidden;
background-color: #e4b7c0;
}
.highlight{
color: #fce2e7;
display:block;
}
.color{
color: #a33e52;
position: absolute;
top: 19px;
}

[/css]

Notice that .color, the overlayed layer, has an offset of 1px relative to the highlight, the base layer, displaced from top by a 20px padding.

That’s it, you can check the letterpress example again or download it for close inspection.

See also these interesting links about the letterpressed style in both web and print.

webdesignledger.com: 10-beautiful-letterpress-business-cards

fontfeed.com: the-magic-that-is-letterpress/

from-the-couch.com: title/the-letterpress-trend-has-to-go

line25.com: web-design-trend-showcase-letterpress-text-effect

Published by Elio Rivero

Software engineer, designer and photographer.

25 thoughts on “Create letterpressed type using only CSS”

  2. Why wouldn’t you use: h1, h2, h3 {text-shadow:0 1px 1px #color;}

    Same effect but without the unnecessary markup and duplicated content; semantically correct too!

  4. It’s a neat trick, definitely, if you know for sure screen readers won’t be attempting to crawl your site for users. The dupe content is a bigger turnoff for me than not seeing a drop shadow in IE6.

  5. I Agree. And keep in mind that this is not the only way to do it. You could also create an ActionScript app to create your buttons and automatically add the letterpressed effect. You could generate it using PHP as an image (which would be interesting as a tutorial) through GD.

  8. Thanks for the trick. It will come in handy when designing for IE6. Fortunately I haven’t had to in a long time so I have been using the text-shadow method.

  9. As mentioned by jhoysi, screen readers will read the markup, meaning the same text two times.

    A better solution would be an unobtrusive letterpress-javascript.

    1. Interesting, let me know when you write a tutorial about it so I can point a link to it 🙂

Leave a Reply