This has been covered by multiple forums, blogs etc, but we were recently asked if we knew of a way to get the same results without using images. So we thought we would share with you exactly how to get the Letterpress text effect without using an image.

Firstly, you need to create your text, for this tutorial, we have used the following:
<div id="textEffect">
<h2>A3 Media</h2>
</div>

Now that we have design our HTML, we need to apply the Letterpress effect, this is achieved by referencing the H2 tags. In order to achieve the best results the text colour wants to be darker than the background and the shadows you will generate with the CSS will need to be a lighter colour than the text itself and in some cases, you can achieve better results by setting the shadow a lighter colour from the background. For example, greys work really well with this effect.

 
Here is the CSS markup:
body {
background-color: #e9e9e9;
}
#textEffect h2 {
font-size:84px;
font-family: Arial;
color: #afafaf;
text-shadow: 0px 2px 1px #ffffff;
}​

And here is the final result:

And there you have your final result. Not bad eh? Whilst this may not be as good looking as the text created with your image editor, it’s quicker loading and saves time creating the image; things that both you and your visitors should enjoy.