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

You might want to check these related posts:

Liked this? buy me a coffee so I can stay awake doing more things like this.

Spread the word, share this post
[del.icio.us] [Digg] [Facebook] [Google] [LinkedIn] [Reddit] [StumbleUpon] [Technorati] [Twitter] [Yahoo!] [Email]

Tags: ,

Posted on Wednesday, July 8th, 2009 in Graphic design.

“Create letterpressed type using only CSS” received 19 comments! Add yours.

  1. :: Create letterpressed type using only CSS :: - BTRSS July 8th, 2009

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

  2. stewart July 8th, 2009

    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!

  3. Elliot July 8th, 2009

    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.

  4. jhoysi July 8th, 2009

    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. Elliot July 8th, 2009

    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.

  6. Create letterpressed type using only CSS July 8th, 2009

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

  7. MacDaddy Links of the Week - 7/11/09 | bkmacdaddy designs July 11th, 2009

    [...] 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 [...]

  8. Derek July 16th, 2009

    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. koew July 23rd, 2009

    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.

  10. Elliot July 23rd, 2009

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

  11. July 2009's Monthly Mother Lode of MacDaddy Links! | bkmacdaddy designs August 3rd, 2009

    [...] 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 Blog Beautiful [...]

  12. You are now listed on FAQPAL August 6th, 2009

    Create letterpressed type using only CSS…

    How to create letterpressed type using only CSS….

  13. 10 Wonderful Letterpress Type Tutorials September 26th, 2009

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

  14. 10 Wonderful Letterpress Type Tutorials « BeginnerPC : Tips , Tricks & Tutorials September 26th, 2009

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

  15. 10 Wonderful Letterpress Type Tutorials - Programming Blog October 1st, 2009

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

  16. Links salvos de setembro 30, 2009 até outubro 3, 2009 « Thiago Moreira October 3rd, 2009

    [...] 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. [...]

  17. Phone blocker December 1st, 2009

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

  18. Michael March 30th, 2010

    Free Personal Horoscope 2010 : http://astroloveh.co.cc

  19. letterpress con css 3 | SitioAparte June 18th, 2010

    [...] ilovecolors este tutorial de ilovecolors, no me parece muy practico, porque para lograr el efecto utiliza un [...]

Leave a comment