Create letterpressed type using only CSS

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:

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

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.


.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;
}

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

If you liked this you might want to buy me a coffee :)

Tags: development, tutorials

Spread the word, share this post

Posted on Wednesday, July 8th, 2009 in Graphic design.
RSS 2.0 feed for comments.

:: Create letterpressed type using only CSS :: - BTRSS

[...] :: Create letterpressed type using only CSS ::. Share and [...]

July 8th, 2009 at 10:19 am

stewart

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!

July 8th, 2009 at 3:16 pm

Elliot

Stewart, indeed, I’m aware of that:
http://www.css3.info/preview/text-shadow/
However, text-shadow is not supported by our dear IE6, that’s why I’m not using it. But yeah, if you’re targeted to some particular segment and can leave IE6 out, use it.

July 8th, 2009 at 3:30 pm

jhoysi

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.

July 8th, 2009 at 3:54 pm

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.

July 8th, 2009 at 4:03 pm

[...] the rest here: Create letterpressed type using only CSS Tags: Comments0 Leave a Reply Click here to cancel [...]

July 8th, 2009 at 5:59 pm

MacDaddy Links of the Week - 7/11/09 | bkmacdaddy designs

[...] You’ll Soon Be Using Recommended Books for your User Experience and Usability Library Create letterpressed type using only CSS Four Methods to Create Equal Height Columns Essential Wordpress Hacks to BOOST your [...]

July 11th, 2009 at 11:25 am

Derek

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.

July 16th, 2009 at 5:33 pm

koew

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.

July 23rd, 2009 at 11:46 am

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

July 23rd, 2009 at 1:12 pm

July 2009's Monthly Mother Lode of MacDaddy Links! | bkmacdaddy designs

August 3rd, 2009 at 1:43 pm

You are now listed on FAQPAL

Create letterpressed type using only CSS…

How to create letterpressed type using only CSS….

August 6th, 2009 at 12:11 am

10 Wonderful Letterpress Type Tutorials

[...] 8. Create Letterpressed Type Using Only CSS [...]

September 26th, 2009 at 11:20 am

10 Wonderful Letterpress Type Tutorials « BeginnerPC : Tips , Tricks & Tutorials

September 26th, 2009 at 3:57 pm

10 Wonderful Letterpress Type Tutorials - Programming Blog

October 1st, 2009 at 3:10 pm

Links salvos de setembro 30, 2009 até outubro 3, 2009 « Thiago Moreira

[...] Create letterpressed type using only CSS | Graphic design | ilovecolors – 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. [...]

October 3rd, 2009 at 11:32 pm

Phone blocker

Cool article you got here. I’d like to read a bit more concerning this topic.

December 1st, 2009 at 12:02 pm

ilovecolors